Question

javascript多个标签共用同一个处理函数问题？

基本条件如下：
有多个标签，每个标签在网页上标示一条线，所有的标签的class相同，Id按顺序递加
期望结果：
1.当我鼠标滑过任意一条线时，触发一个事件，这个事件提取对应的这条线的属性信息用ajax从服务器请求数据，将返回的结果显示出来
已解决的问题：
1.

现在已经解决了单一的一条线触发事件取得结果并显示，如图，将for循环注释，将其中的i变量改为0,1，或2就能实现触发单一的一条线
请高手指点下，谢谢





Answer 1

同学 你太小瞧jQuery的威力了，在提供解决方案前，先简单说一下，循环mouseover、ajax的问题，

因为mouseover是事件，内部代码不是在ready的时候执行，所以和ajax一样，等同于是是异步执行的，加上js的变量作用域，你的代码会出现这样的问题：你在mouseover 或者 ajax的success中访问外层的变量i，发现i永远是最大值，效果就是不管你触摸哪条线，都只有最后一条线有反映。

正确的jQuey用法如下

//代码就没有全写了,使用this，可以免掉for循环
//给所有满足条件的元素绑事件
$('.path_n').mouseover(function(){
    var $th=$(this);//用this来区分当前是在哪个元素上移动，这里的this为鼠标当前移入的元素对象
    //后续取attribute可以通过jQuery的attr方法来取
    var real_data=$th.attr('real_data');
    var abnormal_data=$th.attr('abnormal_data');
    //.....
    $.ajax({
        //...
    });
});

Answer 2

var tag = $('path.path_n'); 这里没有抓取到标签吧。
alert(tag.length)看看有没有

追问

抓到了，现在是3个，我用debug调试过

追答

把 $("path.path_n")[i]替换为this。

this就是当前mouseover的标签

追问

这个我试了，但是只能提取到第一条线

追答

$(document).ready(function(){
    $('path.path_n').mouseover(function() {
        var attr3 = this.attributes[3];
        var data_str = attr3.nodeName + '=' + attr3.nodeValue;
        // ajax
    });
});

这样写呢

追问

还是只能提取到第一条线的

追答

你能打开下面的吗
codepen。io/anon/pen/nhCoa

Answer 3

var tag = $('path.path_n'); 这里没有抓取到标签吧。 alert(tag.length)看看有没有