Question

有ID的几个热点。 ID特定热点在鼠标悬停时显示一个区域（＃ID-ed textarea），然后在mouseout处隐藏textareas（注意CSS显示：隐藏比hide快得多）。大概有50个。我已经详细地写了这个 - 也就是每个人的功能。

希望学习更好，更明智，更有效，更短的方法来实现这一目标。

    //// POP 1_1
$('#pop_01_01').hover(
    function() {
    $('#text_01_01.textarea').fadeIn('fast');          
    },
    function() {
    $('#text_01_01.textarea').css({'display':'none'});
    }
);
//// POP 02_01
$('#pop_02_01').hover(
    function() {
    $('#text_02_01.textarea').fadeIn('fast');          
    },
    function() {
    $('#text_02_01.textarea').css({'display':'none'});
    }
);
//// POP 02_01
$('#pop_02_02').hover(
    function() {
    $('#text_02_02.textarea').fadeIn('fast');          
    },
    function() {
    $('#text_02_02.textarea').css({'display':'none'});
    }
);
//// POP 02_03
$('#pop_02_03').hover(
    function() {
    $('#text_02_03.textarea').fadeIn('fast');          
    },
    function() {
    $('#text_02_03.textarea').css({'display':'none'});
    }
);

Answer 1

您可以执行以下操作：

将具有此行为的所有对象合并到一个jQuery选择器中，以便它们可以运行相同的代码。
从选择器中移除textarea，因为无论如何它都是unqiue所以不需要它，没有它就应该更快。
从正在悬停的对象ID中提取您想要的ID并抓取结束字符，以便您可以使用它来创建您想要的其他ID。
使用.hide()代替.css({'display':'none'});作为内置快捷方式。

结果代码：

$('#pop_01_01, #pop_02_01, #pop_02_02').hover(
    function() {$('#text_' + this.id.substr(-5)).fadeIn('fast');},
    function() {$('#text_' + this.id.substr(-5)).hide();}
);

Answer 2

使用这样的函数：

function makehover(myid)
{
  $('#pop'+myid).hover(
      function() {
      $('#text'+myid+'.textarea').fadeIn('fast');          
      },
      function() {
      $('#text'+myid+'.textarea').css({'display':'none'});
      }
  );

然后致电

 makehover('_01_01');
 makehover('_02_01');
 makehover('_02_02');

或通过jQuery调用

 $.each(['_01_01','_02_01','_02_02'],function (a,b) { makehover(b); });

或致电（1.6+ javascript）

 ['_01_01','_02_01','_02_02'].map(function (a) { makehover(a); return a; });

等

Answer 3

如果你想以jquery的方式做，请考虑：

$.fn.makeHover = function() {
    this.each(function() {
        var $el = $(this),
            $textarea = $el.find('textarea');

        $el.hover(
            function() {
                $textarea.fadeIn('fast');
            },
            function() {
                $textarea.hide();
            }
        );
    });
};

$('#pop_01_01, #pop_02_01, #pop_02_02, #pop_02_03').makeHover();

顺便说一句，我也在缓存$el和$textarea以避免一直浏览DOM（为了提高性能）。

Answer 4

执行此操作的最佳方法是按类而不是id引用项目，并将相关部分（01_01,01_02等）存储在data-id属性中而不是id中。

HTML -
<div class="pop" data-id="_01_01"></div>
<div class="pop" data-id="_02_01"></div>
<div class="pop" data-id="_02_02"></div>

<textarea data-id="_01_01"></textarea>
<textarea data-id="_02_01"></textarea>
<textarea data-id="_02_02"></textarea>

//// All pops
$('.pop').hover(
    function(e) {
      var dataid = $(e.target).attr("data-id");
      $('textarea[data-id="'+dataid+'"]').fadeIn('fast');
    },
    function(e) {
      var dataid = $(e.target).attr("data-id");
      $('textarea[data-id="'+dataid+'"]').hide();
    }
);

这样的东西应该可以很好地应用到你的所有元素，不会使用一堆丑陋的不必要的id，并保持你的数据清洁并与你的名字分开。

小提琴 - http://jsfiddle.net/fGLnB/

Answer 5

$('#pop_01_01, #pop_02_01, #pop_02_02').hover(
    function(){
        id = $(this).attr('id');
        $('#text'+id.substring(3,id.length)).fadeIn('fast');          
    },
    function(){
        id = $(this).attr('id');
        $('#text'+id.substring(3,id.length)).css({'display':'none'});
    }
);

我已经省略了“.textarea”类，因为ID应该是唯一的，因此没有理由再使用类

Answer 6

您可以执行以下操作：

var hotspots = ['01_01','02_01','02_02'];   
hotspots.forEach(function(i) {
    $('#pop_' + i).hover(
        function() {
        $('#text_' + i + '.textarea').fadeIn('fast');          
        },
        function() {
        $('#text_' + i + '.textarea').css({'display':'none'});
        }
    );
});

如何缩短这个？

6 个答案: