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

下面的jQuery将在所有包含以“listid”开头的类的元素上设置悬停事件。然后，它通过减少悬停类的数字部分来产生适当的“.list”选择器。

$("[class^=listid]").on("mouseover", function(){    //set up event handler on all items in list
    var listclass = $(this).attr('class').match(/listid[\d]*/).toString();    //extract hovered class (listid#) using regex
    var listselector = ".list" + listclass.substring(6);    //convert hovered class to matching list# class
    $(listselector).stop(true, true).fadeToggle();    //your function to toggle fade
});
$("[class^=listid]").on("mouseout", function(){
    var listclass = $(this).attr('class').match(/listid[\d]*/).toString();
    var listselector = ".list" + listclass.substring(6);   
    $(listselector).stop(true, true).fadeToggle();
});

<强> JSFiddle DEMO

*虽然这确实可以解决您的问题，但您应该重新考虑构建这些元素的方式，因为它实际上是低效且重复的（但是再次，您可能无法重构您的html和css，在这种情况下，这个' hacky'解决方案是要走的路。）

Answer 2

尝试以下方法：

$('.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();

});

<强>解释

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

<强> FIDDLE EXAMPLE

jQuery：使用多个不同的类名称悬停

2 个答案: