javascript - jQuery:悬停多个不同的类名

Question

这是我正在做的事情:

http://moresidencesatlanta.com/map/map.html http://moresidencesatlanta.com/map/scripts-map.js

我正在尝试弄清楚如何设置 .hover 函数，这样我就不必对右侧的所有名称进行硬编码。就像我这里一样:

jQuery(".listid1").hover(
        function(){
            $(".list1").stop(true, true).fadeToggle();
        }
    );
    jQuery(".listid2").hover(
        function(){
            $(".list2").stop(true, true).fadeToggle();
        }
    );

数据如下所示:

tooltipsData = [ 

        /* Resturants - Brown */
        {"id":"1","x":"72.8","y":"23.2","title":"F&B Atlanta","image":null,"className":"brown","status":"1",
        "content":"F&B Atlanta <img src=\"spacer.gif\" width=\"1px\">"},

        {"id":"2","x":"44.5","y":"80.6","title":"Antica Posta","image":null,"className":"brown","status":"1",
        "content":"Antica Posta <img src=\"spacer.gif\" width=\"1px\">"},

我认为这可能有效，但变量 (id) 最终成为数据列表中的最后一个 id (98)。

jQuery.each('.listid' + [id]).hover(
            function(){
                $('.list' + [id]).stop(true, true).fadeToggle();
            }
        );

有什么建议或解决方案可以在这里发挥作用吗？ 谢谢!

Answer 1

尝试以下操作:

$('.tooltipsList').on('mouseover','span', function(){

    var id = $(this).attr('class');
    id = id.replace('listid','');
    var xid = id.split(' ');

    $('.list'+ xid[0]).stop(true,true).fadeIn();

});
$('.tooltipsList').on('mouseout','span', function(){

    var id = $(this).attr('class');
    id = id.replace('listid','');
    var xid = id.split(' ');

    $('.list'+ xid[0]).stop(true,true).fadeOut();

});

说明:

1. 获取当前鼠标悬停链接的类属性。 var id = $(this).attr('class'); // result= .list1 brown .
2. 首先从类中删除单词列表。 id = id.replace('listid',''); // result = 1 brown
3. 用空格分割结果 var xid = id.split(' '); // result = Array(0=>1,1=>brown) 。
4. $('.list'+ xid[0])是您正在寻找的元素。

<强> FIDDLE EXAMPLE