jQueryコードの統合

Question

#p3-btn〜#p30-btnの30個のボタンがあり、クリックしたときに.p30 divになります。このコードを統合するにはどうすればいいですか。文字通り30回以下のコードをコピー＆ペーストしてIDやクラスを変更する必要はありません。

$('#p3-btn').click(function() { 
    $('.p3').fadeIn().delay(2000).fadeOut(); 
    }); 

乾杯。

Answer 1

これは、プログラミングでDRY（自分自身を繰り返さない）という概念を実証したものです。それに対処する方法の1つは、例えば、要素のidやその他の要素のクラスを参照するために使用するIDのパラメータを持つ関数を作ることです。

function attachClick(id){ 
    $('#' + id + '-btn').click(function() { 
    $('.' + id).fadeIn().delay(2000).fadeOut(); 
    }); 
} 

それからちょうど呼び出します機能（たとえば、forループからの）このような：

attachClick('p30'); 

---

上記の例では、既存のコードとの1対1の試合になるだろうが、より良いアプローチを見つけることであろう各ボタンとそれが影響を及ぼす要素との関係は、各ボタンにリスナーを付けることを避けるllyではなく、親要素に1つのリスナーをアタッチし、イベントハンドラー関数が残りの部分を処理するようにします。しかし、あなたのマークアップを見ることなく、私はそれを書き直すことなくこれを行うことができるかどうかは分かりません。あなたはこのようなマークアップを持っていた場合たとえば、それが実現するのは簡単だろう：Shomzのanwserは、あなたはjQueryのセレクタを使用することができることを

<div class="container"> 
    <button>Button</button> 
    <div>Div to be affected</div> 
</div> 

Answer 2

もっとシンプル：$('button[id^="p"][id$="-btn"]')あなたは要素を選択することができ

$('button[id^="p"][id$="-btn"]').on("click", function() { 
    var id = $(this).attr("id").replace("-btn", "").replace("p", ""); 
    $('.p' + id).fadeIn().delay(2000).fadeOut(); 
}); 

buttonと入力してください。idは 'p'で始まり、 '-btn'で終わります。

Answer 3

これを実現するには、属性セレクタを使用できます。

function createDivs(len) { 
 
    var $div = $('<div>'); 
 
    for (var i = 0; i < len; i++) { 
 
    var prefix = 'p' + i; 
 
    var $inner = $('<div>'); 
 
    $inner.attr('id', prefix + '-btn') 
 
    var $p = $('<p>'); 
 
    $p.text(i).addClass(prefix); 
 
    $inner.append($p); 
 
    $div.append($inner); 
 
    } 
 
    return $div; 
 
} 
 
$(function() { 
 
    $('.content').append(createDivs(30)); 
 

 
    $('[id^="p"][id$="-btn"]').on('click', function() { 
 
    $(this).find('[class^=p]').fadeOut().delay(2000).fadeIn(); 
 
    }); 
 
})

[id$="-btn"] { 
 
    width: 100%; 
 
    border: 1px solid gray; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> 
 
<div class='content' />