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