Php 切换多个相关元素的显示

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

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

所有select&selected按钮都在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>

代码的主要问题是，您选择了给定类的所有元素，而不仅仅是与单击的元素相关的元素。要解决此问题，请使用
this
关键字遍历DOM以查找
同级（）
元素，然后根据需要对其进行修改

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

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

综上所述，这里有一个有效的例子：


$（'选择btn广播'）。打开（'单击'，功能（e）{
$（this.hide（）.sides（'.active button broadcast'）.show（）；
//附加列表广播（本）；
});
$（'.active button broadcast'）。打开（'单击'，函数（e）{
$（this.hide（）.sides（'.select btn broadcast'）.show（）；
//删除列表广播（本）；
});
。活动按钮广播{
显示：无；
}

挑选
挑选出来的
挑选
挑选出来的
挑选
挑选出来的
其余的代码在哪里？代码中只给出了一个按钮。此外，请不要使用不相关的标记，因为从可用性角度来看，这里毕竟不涉及PHP，您不应该首先使用
a
，而应该使用实际的
按钮。如果在处理程序函数中，首先转到当前单击按钮的父元素（
.parent（）
，或
.parents（）
，如果在更深的嵌套级别操作），然后仅在该父元素的上下文中选择具有其他类的元素（
.find（）
）.没问题。如果答案有用，别忘了接受