Question

<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.Thanks提前....

Answer 1

这将是一个更简洁的方法，没有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(); 
});

这样，如果您将其ID插入按钮的data-id属性，则可以显示/切换任何元素。

Answer 2

由于您提供了输入类btn，因此需要使用.代替#作为参考。然后你可以这样做，根据点击的按钮显示div：

$('.btn').click(function(i) {
    var index = $(this).index('input') + 1;
    $('#div' + index).show().siblings('div').hide();
});

<强> FIDDLE

Answer 3

你可以这样做：

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

这样，您onClick元素就不需要<button>属性了，因为您的<div>元素与<p>元素的关联一个等于点击按钮值的文本...

Jsfiddle example

我如何在jQuery的click函数中使用动态div id

3 个答案: