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 事件中动态传递这些除法。在此先感谢....

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

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

于 2013-04-23T17:00:46.967 回答
3

Since you give your input class btn, you need to use . instead of # for reference. Then you can do like this to show the div according to the button clicked:

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

FIDDLE

于 2013-04-23T17:02:51.000 回答
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 回答