3 
<div id="div1" style="display:none;" class="abcd">
     <p>Black</p>
 </div>
  <div id="div2" style="display:none;"  class="abcd">
    <p>Red</p>

 </div>
  <div id="div3" style="display:none;" class="abcd">
   <p>Blue</p>
 </div>

<input type="button" value="Black" id="black" class="btn" 
onClick="showDiv('div1')"/>

<input type="button" value="Red" id="red" class="btn" 
onClick="showDiv('div2')"/>

<input type="button" value="Blue" id="blue" class="btn" 
onClick="showDiv('div3')"/>

function showDiv(divId){

$('.abcd').hide();
$('#'+divId).show();

}

上記のコードを JavaScript で使用して、対応するボタンがクリックされ、残りの div を非表示にする必要があるときに非表示の div を表示しています。javascript 関数から div id を渡しています。

$('#btn').click(function(){ 

});

ここで、jQuery .clickイベントでこれらのdividを動的に渡す方法を説明します。よろしくお願いします....

4

3 に答える 3

8

onclick を使用しないと、これは少しクリーンな方法になります。

<input data-id="div1" type="button" value="Black" id="black" class="btn" />

<input data-id="div2" type="button" value="Red" id="red" class="btn" />

<input data-id="div3" type="button" value="Blue" id="blue" class="btn"/>

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

data-idこのようにして、id をボタンの属性に挿入すると、任意の要素を表示/切り替えできます。

于 2013-04-23T17:00:46.967 に答える
2

次のように実行できます。

$('.btn').click(function(){
    $('.abcd').not(':contains('+$(this).val()+')').hide();
    $('.abcd:contains('+$(this).val()+')').show();
});

このようにして、要素にクリックされたボタンの値に等しいテキストを持つという事実に基づいて見えるようonClickに、要素に属性は必要ありません...<button><div><p>

Jsfiddle の例

于 2013-04-23T17:01:02.857 に答える