jquery - 我如何在 jQuery 的点击功能中使用动态 div id

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 事件中动态传递这些除法。提前谢谢......

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 属性中，您就可以显示/切换任何元素。