php - 切换多个相关元素的显示

Question

每个包都有两组按钮，一组用于将数据插入数据库，另一组用于从数据库中删除数据。

当我单击“选择”按钮时，数据将通过 AJAX 插入，然后隐藏“选择”按钮并显示“选定”按钮。当我单击“选定”按钮时，数据将通过 AJAX 调用从数据库中删除。然后，“选定”按钮将被隐藏，“选择”按钮将再次显示。

所有选择和选定的按钮都在 PHP while 循环内，因此按钮具有相同的名称，但具有增量 ID。当我单击一个“选择”按钮时，另一个按钮也显示“已选择”。当我点击时，我需要一些东西来跟踪每个按钮的 ID。

<div class="col-sm-2">
  <a class="btn btn-primary select-btn select-btn-broadcast" id="<?php echo $id ; ?>" onClick="addintoListBroadcast(this)">Select</a>
  <a class="btn btn-primary active-button active-button-broadcast" id="<?php echo $id ; ?>" onClick="deleteintoListBroadcast(this)" style="display: none;">Selected</a>
</div>

<script>
  $('.select-btn-broadcast').click(function (e) {
    var pkgId = this.id;
    //alert(pkgId);
    $('.select-btn-broadcast').hide();
    $('.active-button-broadcast').show();
  });

  $('.active-button-broadcast').click(function(e) {
    $('.select-btn-broadcast'.show();
    $('.active-button-broadcast').hide();
  });
</script>

Answer 1

代码的主要问题是因为您选择了具有给定类的所有元素，而不仅仅是与被单击的元素相关的元素。要解决此问题，请使用 this 关键字遍历 DOM 以查找 sibling() a 元素，然后根据需要修改它。

另请注意，您的代码中还有其他一些方面可以改进。首先，不要使用内联 CSS。使用已应用于元素的类来修改外部样式表中的样式。

同样，不要使用内联事件处理程序，例如 onclick。在您通过 jQuery 绑定(bind)的不显眼的事件处理程序中调用相关函数。

综上所述，这是一个有效的示例:

$('.select-btn-broadcast').on('click', function(e) {
  $(this).hide().siblings('.active-button-broadcast').show();
  // addintoListBroadcast(this);
});

$('.active-button-broadcast').on('click', function(e) {
  $(this).hide().siblings('.select-btn-broadcast').show();
  // deleteintoListBroadcast(this);
});

.active-button-broadcast {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-sm-2">
  <a class="btn btn-primary select-btn select-btn-broadcast">Select</a>
  <a class="btn btn-primary active-button active-button-broadcast">Selected</a>
</div>
<div class="col-sm-2">
  <a class="btn btn-primary select-btn select-btn-broadcast">Select</a>
  <a class="btn btn-primary active-button active-button-broadcast">Selected</a>
</div>
<div class="col-sm-2">
  <a class="btn btn-primary select-btn select-btn-broadcast">Select</a>
  <a class="btn btn-primary active-button active-button-broadcast">Selected</a>
</div>