Question

我有多个按钮，如： #recent_post_button_54，#recent_post_button_55等。

当我点击按钮#recent_post_button_54时，我希望它切换相应的#recent_post_content_54 div。

我的代码是：

jQuery(document).ready(function($) {
  var buttons = $('.recent_post_header button');
  for (var i = 0; i< buttons.length; i++) {
    var id = (buttons[i].id).match(/\d+$/)[0];

    $("#recent_post_button_"+id).click(function() {
      console.log("I've clicked #recent_post_button_"+id);
      $("#recent_post_content_"+id).toggle();
    });
  }
});

我有三个带有ID 54,52,50的按钮。但是使用此代码，我会为所有按钮获取I've clicked #recent_post_button_50，并且所有按钮仅使用id 50切换最后一个内容div。

此代码有什么问题？

Answer 1

在id上使用^（以...开头）表达式。另外，要获得相应的目标div，请替换单词＆＃34; post＆＃34;与＆＃34;内容＆＃34;。

$("input:button[id^='recent_post_button']").click(function()
{
      var id = $(this).attr("id");

    var contentID = id.replace("button","content");
       $("#" + contentID).toggle();

});

http://jsfiddle.net/nzyaq8ma/

缩小：

$("input:button[id^='recent_post_button']").click(function()
{
      $("#" + $(this).attr("id").replace("button","content")).toggle();      
});

Answer 2

尝试此解决方案using event delegation

jQuery(document).ready(function($) {
  
  
  $('.recent_post_header').click('button' , function(evt){
    
    var $but = $(evt.target);
    var id = $but.attr('id');

        alert( "I've clicked #recent_post_button_" +  id);
    
    $("#recent_post_content_"+ id).toggle();
    
  })
  
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='recent_post_header'>
  <button id='54'>button 54</button>  
  <button id='52'>button 52</button>  
  <button id='50'>button 50</button>  
</div>
<div id='recent_post_content_52'>
  post 52
</div>

<div id='recent_post_content_50'>
  post 50
</div>

<div id='recent_post_content_54'>
  post 54
</div>

Answer 3

对所有这些按钮使用通用类，如此链接中所示（我创建了一个plunker：http://plnkr.co/edit/1xFhmDSo8LUCztDQF9ma）。您可以根据需要修改选择器。假设您有这样的按钮，您可以使用如下所示的代码：

 <button type="button" id="recent_post_button_54" class="dynamicIdButton">Button1</button>
<button type="button" id="recent_post_button_52" class="dynamicIdButton">Button1</button>
<button type="button" id="recent_post_button_50" class="dynamicIdButton">Button1</button>

<script>
  $(".dynamicIdButton").click(function() {
  alert('I have clicked! : ' + this.id);
});
</script>

如何在多个按钮上设置单击事件

3 个答案: