javascript - 如何在不重写现有代码的情况下将 jquery 代码应用于不同的目标？

Question

是否可以执行现有的 jquery 代码但将其应用于备用目标？

例子

$('#btn1').click(function() {
    $('#div1').fadeOut()
});

是否可以重用此代码以从#btn2 和目标#div2 执行而不重写代码。

解决方案

<a href="#"class="btn" data-id="35">Click</a>

$('.btn').click(function() {
    $('#div'+$(this).data('id')).fadeOut()
});

Answer 1

这是一个解决方案：

$('#btn1,#btn2').click(function() {
    $('#div'+this.id.slice(-1)).fadeOut()
});

如果你想要更通用的东西，为任何“btnxxx”工作，那么你可以这样做：

$('[id^=btn]').click(function() {
    $('#div'+this.id.slice(3)).fadeOut()
});

但是一个类和一个数据属性会更好：

<span class=btn data-btnid=35>AAA</span>

$('.btn').click(function() {
    $('#div'+$(this).data('btnid')).fadeOut()
});

---

在（不那么相关的）评论之后编辑：

这是另一个例子：

<span class=btn data-btnid=35 data-dir="Left">AAA</span>

$('.btn').click(function() {
    var $this = $(this);
    var $target = $('#div'+$(this).data('btnid'));
    var animation = {};
    animation['margin'+$this.data('dir')] = '0';
    $target.animate(animation);
});