Question

我正在尝试编写一些JavaScript来帮助压缩这个jQuery函数集（编号为1到7）......

var metaImage = $(selected).closest('p').find('.meta-image),
    imgurl = $(metaImage).val();

我尝试了以下一些代码，但它只针对$('.project-1 img').hover(function() { $('#id1').slideToggle(); }); $('.project-2 img').hover(function() { $('#id2').slideToggle(); }); ... $('.project-7 img').hover(function() { $('#id7').slideToggle(); });的{{1}} ...

#id7

如何将代码压缩成更干净的东西？谢谢！

Answer 1

虽然循环可行（如果你解决了闭包问题），一个更好的解决方案是使用DRY原则来附加一个适用于所有img元素的单个事件处理程序，并避免任何需要完全是循环或闭包。试试这个：

<div class="project">
    <img src="foo.jpg" data-target="#id1" />
</div>
<div class="project">
    <img src="bar.jpg" data-target="#id2" />
</div>
<!-- and so on... -->

<div id="id1">Lorem</div>
<div id="id2">Ipsum</div>
<!-- and so on... -->

$('.project img').hover(function() {
    var target = $(this).data('target');
    $(target).slideToggle();
});

Answer 2

上述评论者已正确诊断出问题所在。这是一个修复：

for (i = 1; i <= 7; i++) {
  (function (i) {
    $('.project-' + i + ' img').hover(function () {
      $('#id' + i).slideToggle();
    });
  })(i);
};

冷凝相同的功能

2 个答案: