jquery - 这怎么能缩短？

Question

按 ID 有几个热点。ID 特定的热点在鼠标悬停时显示一个区域（#ID-ed textarea），然后在鼠标移出时隐藏文本区域（注意 CSS display:hidden 比 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'});
    }
);

score 2 · Accepted Answer

您可以执行以下操作：

将具有此行为的所有对象组合到一个 jQuery 选择器中，以便它们都可以运行相同的代码。
从选择器中删除，textarea因为 id 无论如何都是 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();}
);

score 1 · Accepted Answer

If you want to do it the jquery way, consider that:

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

By the way, I'm also caching $el and $textarea to avoid going through the DOM all the time (for performance improvement).

score 1 · Accepted Answer

The best way to do this is to reference your items by class instead of id, and store the relevant part (01_01, 01_02, etc) in a data-id attribute instead of in the 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();
    }
);

Something like that should be able to nicely apply to all your elements, doesn't use a bunch of ugly unnecessary ids, and keeps your data clean and separate from your names.

Fiddle here - http://jsfiddle.net/fGLnB/

score 1 · Accepted Answer

使用这样的功能：

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; });

等等

score 0 · Accepted Answer

您可以执行以下操作：

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'});
        }
    );
});

score 0 · Accepted Answer

$('#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 应该是唯一的，所以没有理由另外使用类

jquery - 这怎么能缩短？

6 回答 6

Related

Reference