Fatal编程技术网
  • javascript/
  • Javascript 改变颜色的Raphael js onclick动作？保持该颜色，直到返回到“单击其他”按钮

Javascript 改变颜色的Raphael js onclick动作？保持该颜色，直到返回到“单击其他”按钮

javascript jquery html svg

Javascript 改变颜色的Raphael js onclick动作？保持该颜色，直到返回到“单击其他”按钮,javascript,jquery,html,svg,raphael,Javascript,Jquery,Html,Svg,Raphael,我评论道。我对这个库有问题，因为这是我第一次使用它。花了几个小时寻找解决方案，但我没有找到 我需要将鼠标盖上的颜色更改为X颜色，并在没有鼠标盖时恢复为原始颜色 单击时，更改为Y颜色，并保持Y颜色不变，直到再次单击，鼠标悬停使其保持运行 我在svg映射的示例中得到了指导： 这是我的代码： <link href="includes/css_includes/noticias_index.css" rel="stylesheet" type="text/css" /> <head&

我评论道。我对这个库有问题，因为这是我第一次使用它。花了几个小时寻找解决方案，但我没有找到

我需要将鼠标盖上的颜色更改为X颜色，并在没有鼠标盖时恢复为原始颜色

单击时，更改为Y颜色，并保持Y颜色不变，直到再次单击，鼠标悬停使其保持运行

我在svg映射的示例中得到了指导：

这是我的代码：

<link href="includes/css_includes/noticias_index.css" rel="stylesheet" type="text/css" />
 <head>
    <title>Ejemplo Raphaeljs</title>
    <script type="text/javascript" src="includes/js_includes/jquery.min.js"></script>
    <script type="text/javascript" src="includes/js_includes/raphael-min.js"></script>
  </head>

<div class="contenido_noti">

    <h1>RESULTADOS ELECCIONES 2012 - MUNICIPIOS</h1>

<center>
<table width="1180" border="0">
  <tr>
    <th scope="col">MAPA</th>
    <th scope="col" style="text-align:center">ESTADISTICAS</th>
  </tr>
  <tr>
    <th scope="col" width="">    <div id="lienzo">

    </div></th>
    <th scope="col" width="650" style="text-align:left">
    <div id="municipiotxt"><img id="loadingicon" src="img_main/selecciona.png" /></div>
    </th>
  </tr>
</table>
</center>
   <script>
      var municipios_data = {
    'ph1': 'Cadereyta de Montes',
    'ph2': 'Jalpan de Serra',
    'ph3': 'Colón',
    'ph4': 'Querétaro',
    'ph5': 'Pinal de Amoles',
    'ph6': 'Arroyo Seco',
    'ph7': 'Peñamiller',
    'ph8': 'El Marqués',
    'ph9': 'Tolimán',
    'ph10': 'Landa de matamoros',
    'ph11': 'Tequisquiapan',
    'ph12': 'Pedro Escobedo',
    'ph13': 'Ezequiel Montes',
    'ph14': 'San Joaquín',
    'ph15': 'Corregidora',
    'ph16': 'Huimilpan',
    'ph17': 'San Juan del Río',
    'ph18': 'Amealco de Bonfil'};

      var default_attributes = {
            fill: '#999999',
            stroke: '#000000',
            'stroke-width': 1,
        };  
      var $munictxt = $('#municipiotxt');

      $.ajax({
        url: 'includes/mapas/Mapa_muni.svg',
    type: 'GET',
    dataType: 'xml',
    success: function(xml) {
      var rjs = Raphael('lienzo', 570, 670);
      var corr="";
      $(xml).find('svg > g >  path').each(function() {
        var path = $(this).attr('d');
    var pid = $(this).attr('id');
    var pid_select="";
        var munic = rjs.path(path);

        munic.attr(default_attributes);
                /*funcion de hover*/
        munic.hover(function() {    


          this.animate({ fill: '#00bbff' });

        }, /*funcion al moverso mouse*/ function() {


          this.animate({ fill: default_attributes.fill});


        })      /*funcion de click*/ .click(function() {
         var muni_query=municipios_data[pid];
         muni_select=pid;
$("#municipiotxt").load("includes/querys_includes/mapa_muni_SVG_QUERY.php",{muni_query:muni_query});
   $munictxt.html(muni_select);
          this.animate({ fill: '#FF0000' });

        });
          });
    }
      });

    </script>

</div>


拉斐尔
2012年电子结果-市政
马帕
地产
var市政数据={
“ph1”：“Cadereyta de Montes”，
“ph2”：“Jalpan de Serra”，
‘ph3’：‘Colón’，
‘ph4’：‘Querétaro’，
“ph5”：“Pinal de Amoles”，
“ph6”：“阿罗约·塞科”，
‘ph7’：‘Peñamiller’，
“ph8”：“埃尔侯爵”，
“ph9”：“托利曼”，
“ph10”：“兰达·德·马塔莫罗斯”，
“ph11”：“特奎亚潘”，
“ph12”：“Pedro Escobedo”，
“ph13”：“Ezequiel Montes”，
“ph14”：“圣若金”，
“ph15”：“Corregidora”，
‘ph16’：‘慧蜜盘’，
“ph17”：“圣胡安·德尔·里奥”，
‘ph18’：‘Amealco de Bonfil’}；
变量默认属性={
填写：“#999999”，
笔划：'#000000'，
“笔划宽度”：1，
};  
变量$munictxt=$（“#municipiotxt”）；
$.ajax({
url:'includes/mapas/Mapa_muni.svg'，
键入：“GET”，
数据类型：“xml”，
成功：函数（xml）{
var rjs=拉斐尔（'lienzo'，570670）；
var corr=“”；
$（xml）.find（'svg>g>path'）。每个（函数（）{
var path=$（this.attr（'d'）；
var pid=$（this.attr（'id'）；
var pid_select=“”；
var munic=rjs.path（路径）；
市政属性（默认属性）；
/*悬停函数*/
munic.hover（函数（）{
动画（{fill:'#00bbff'}）；
}，/*函数移动鼠标*/function（）{
动画（{fill:default_attributes.fill}）；
})/*函数取消单击*/.单击（函数（）{
var市政查询=市政数据[pid]；
muni_select=pid；
$（“#市政文本”）.load（“includes/querys_includes/mapa_muni_SVG_QUERY.php”，{muni_QUERY:muni_QUERY}）；
$munictxt.html（muni_select）；
动画（{fill:'#FF0000'}）；
});
});
}
});
如果我的英语不好，很抱歉。

让我给你一个简单的例子，告诉你如何做到这一点：

我创建所有需要的元素

var rect1 = paper.rect(20,30,100,12).attr({fill: "orange"});   
...
并将它们放入阵列中：

var elements = [rect1, rect2, rect3];
....
之后，每个元素都会获得鼠标操作：

for(var i = 0; i< elements.length; i++) {
  appendActionToElement(elements[i]);
}

for（var i=0；i
以下是关键行动：

function appendElement(element) {


  element.mouseover(function () {   //on mouseover change to color X
    this.attr('fill', 'green');
  });

  element.mouseout(function () {    //on mouseout change color depending on status
    if(!this.active)
      this.attr('fill', 'orange');
    else
      this.attr('fill', 'white');
  });

  element.click(function() {
    this.attr('fill', 'white');   //white should be your color Y
    this.active = true;           //set it active
    for(var i = 0; i< elements.length; i++) {
      if(elements[i] != this) {      //very important, on click we loop through all elements
        elements[i].active = false;  //and set them inactive and orange.
        elements[i].attr('fill', 'orange');
      }

    }
  });
}

函数元素（元素）{
mouseover（mouseover上的函数（）{//
这个.attr（'fill'，'green'）；
});
mouseout（函数（）{//on mouseout根据状态改变颜色
如果（！this.active）
this.attr（'fill'，'orange'）；
其他的
这个.attr（'fill'，'white'）；
});
元素。单击（函数（）{
this.attr（'fill'，'white'）；//白色应该是您的颜色Y
this.active=true；//将其设置为活动
对于（var i=0；i
谢谢！它帮助我遵循代码。实现在for if中进行比较，但仅比较变量，不访问对象或元素“市政数据”以更改属性

 <script>
      var municipios_data = {
    'ph1': 'Cadereyta de Montes',
    'ph2': 'Jalpan de Serra',
    'ph3': 'Colón',
    'ph4': 'Querétaro',
    'ph5': 'Pinal de Amoles',
    'ph6': 'Arroyo Seco',
    'ph7': 'Peñamiller',
    'ph8': 'El Marqués',
    'ph9': 'Tolimán',
    'ph10': 'Landa de matamoros',
    'ph11': 'Tequisquiapan',
    'ph12': 'Pedro Escobedo',
    'ph13': 'Ezequiel Montes',
    'ph14': 'San Joaquín',
    'ph15': 'Corregidora',
    'ph16': 'Huimilpan',
    'ph17': 'San Juan del Río',
    'ph18': 'Amealco de Bonfil'};
    /*----*/
      var default_attributes = {
            fill: '#999999',
            stroke: '#000000',
            'stroke-width': 1,
        };  
    /*----*/
      var $munictxt = $('#municipiotxt');
    /*----*/

      $.ajax({
        url: 'includes/mapas/Mapa_muni.svg',
    type: 'GET',
    dataType: 'xml',
    success: function(xml) {
      var rjs = Raphael('lienzo', 570, 670);
      var corr="";
      $(xml).find('svg > g >  path').each(function() {
        var path = $(this).attr('d');
    var pid = $(this).attr('id');
        var munic = rjs.path(path);
    munic.attr(default_attributes);

    munic.mouseover(function () {   //hover
   this.animate({ fill: '#00bbff' });
  });

  munic.mouseout(function () {    //mouse out
    if(!this.active)
   this.animate({ fill: default_attributes.fill});
    else
    this.animate({ fill: 'red' });
  });

  munic.click(function() {

         var muni_query=municipios_data[pid];
         var muni_select=pid;
$("#municipiotxt").load("includes/querys_includes/mapa_muni_SVG_QUERY.php",{muni_query:muni_query});
   $munictxt.html(muni_select);


     this.animate({ fill: 'red' });  
    this.active = true;     

    for(var i = 1; i< 18; i++) {
        posicion = 'ph'+i;
        //alert(municipios_data[posicion])
        //alert(municipios_data[pid])
        alert(this)
      if(municipios_data[posicion] != municipios_data[pid]) {
          //alert("si")


        municipios_data[posicion].attr('fill', 'orange');
        municipios_data[posicion].active = false;
      }

    }


  });                           
          });                         
    }
      });
    </script>


var市政数据={
“ph1”：“Cadereyta de Montes”，
“ph2”：“Jalpan de Serra”，
‘ph3’：‘Colón’，
‘ph4’：‘Querétaro’，
“ph5”：“Pinal de Amoles”，
“ph6”：“阿罗约·塞科”，
‘ph7’：‘Peñamiller’，
“ph8”：“埃尔侯爵”，
“ph9”：“托利曼”，
“ph10”：“兰达·德·马塔莫罗斯”，
“ph11”：“特奎亚潘”，
“ph12”：“Pedro Escobedo”，
“ph13”：“Ezequiel Montes”，
“ph14”：“圣若金”，
“ph15”：“Corregidora”，
‘ph16’：‘慧蜜盘’，
“ph17”：“圣胡安·德尔·里奥”，
‘ph18’：‘Amealco de Bonfil’}；
/*----*/
变量默认属性={
填写：“#999999”，
笔划：'#000000'，
“笔划宽度”：1，
};  
/*----*/
变量$munictxt=$（“#municipiotxt”）；
/*----*/
$.ajax({
url:'includes/mapas/Mapa_muni.svg'，
键入：“GET”，
数据类型：“xml”，
成功：函数（xml）{
var rjs=拉斐尔（'lienzo'，570670）；
var corr=“”；
$（xml）.find（'svg>g>path'）。每个（函数（）{
var path=$（this.attr（'d'）；
var pid=$（this.attr（'id'）；
var munic=rjs.path（路径）；
市政属性（默认属性）；
munic.mouseover（函数（）{//hover
动画（{fill:'#00bbff'}）；
});
munic.mouseout（函数（）{//mouse out
如果（！this.active）
动画（{fill:default_attributes.fill}）；
其他的
动画（{fill:'red'}）；
});
munic.click（函数（）{
var市政查询=市政数据[pid]；
var muni_select=pid；
$（“#市政文本”）.load（“includes/querys_includes/mapa_muni_SVG_QUERY.php”，{muni_QUERY:muni_QUERY}）；
$munictxt.html（muni_select）；
动画（{fill:'red'}）；
this.active=true；
对于（变量i=1；i<18；i++）{
posicion='ph'+i；
//警报（市政数据[位置]）
//警报（市政数据[pid]）
警报（本）
如果（市政数据[Posicon]！=市政数据[pid]）{
//警报（“si”）
市政数据[posicion].attr（'fill'，'orange'）；
市政数据[posicion].active=false；
}
}
});                           
});                         
}
});
我不确定您想要什么，但我相信这一点 
var ab = ["a", "b"];
var p = Raphael(0,0,(ab.length * 150),300);
function resetColor() {
  ab.map(function(notActive) {
    return notActive.attr({fill: "red"});
  });  
}
function colorChange(o) {
  o.attr({fill: "blue"})
}
for (i=0; i<ab.length; i++) {
  ab[i] = p.circle(75 + (i*150),150,75).attr({fill: "red"}).click(function(){
    active = this,
    resetColor(),
    this.attr({fill : "green"})
  }).hover(function(){
    this.attr({fill : "green"})
  }, function(){
    resetColor(),
    colorChange(active)
  });
}

this.attr({fill : "blue"})