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

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

还要注意，您还可以在代码中进行其他改进。首先，不要使用内联CSS。使用已经应用于元素的类在外部样式表中修改其样式。

类似地，请勿使用内联事件处理程序，例如onclick。在通过jQuery绑定的不引人注目的事件处理程序中调用相关函数。

话虽如此，这是一个有效的例子：

$('.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>

切换多个相关元素的显示

1 个答案: