javascript - 使用 JQuery 删除与特定类的最近链接

Question

我有两个链接，一个用于“添加 Angular 色”，第二个用于“删除 Angular 色”。单击“添加 Angular 色”时，我想使用 jQuery 更改“删除 Angular 色”链接的颜色。我已经管理了它的大部分和剩余的功能，但是我缺少一些可以找到的东西，可以用类 SelectRoleLinkToRemove 关闭来改变那个链接的颜色，而不是其他的。这些添加和删除链接以及网格中的每一行。

<div class="ob_gCc1">
    <div class="ob_gCc2">
        <a class="SelectRoleLink" id="" href="#" style="color: red;"> Add Role</a>
        <a class="SelectRoleLinkToRemove HiddenField" id="" href="#"> Remove Role</a>
    </div>
    <div class="ob_gCd"></div>
</div>

jQuery

$(".SelectRoleLink").on("click", function () {

    var selectedRoleID = $(this).attr("id");

    $(this).css("color", "red");

    $(this).closest(".SelectRoleLinkToRemove").css("color", "green");

});

Answer 1

closest 将搜索最近的 ancestor。使用 siblings 删除当前元素的兄弟。

注意:如果您要选择的元素是被单击元素的紧接下一个元素，您也可以使用next。如果不是立即下一个，您也可以使用 nextAll。

$(this).siblings(".SelectRoleLinkToRemove").css("color", "green");

演示

$(".SelectRoleLink").on("click", function() {
  var selectedRoleID = $(this).attr("id");
  $(this).css("color", "red");
  $(this).siblings(".SelectRoleLinkToRemove").css("color", "green");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<div class="ob_gCc1">
  <div class="ob_gCc2">
    <a class="SelectRoleLink" id="" href="#" style="color: red;"> Add Role</a>
    <a class="SelectRoleLinkToRemove HiddenField" id="" href="#"> Remove Role</a>
  </div>
  <div class="ob_gCd"></div>
</div>
<div class="ob_gCc1">
  <div class="ob_gCc2">
    <a class="SelectRoleLink" id="" href="#" style="color: red;"> Add Role</a>
    <a class="SelectRoleLinkToRemove HiddenField" id="" href="#"> Remove Role</a>
  </div>
  <div class="ob_gCd"></div>
</div>

您可以使用以下优化解决方案:

1. selectedRoleID 未使用。可以删除。
2. 无需将点击链接的颜色更改为红色，因为它已经应用
3. 使用类而不是内联样式
4. 在事件处理程序中使用 event.preventDefault() 或 return false。

$(".SelectRoleLink").on("click", function(e) {
  $(this).siblings(".SelectRoleLinkToRemove").addClass('green');

  e.preventDefault();
});

.green {
  color: green;
}
.red {
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<div class="ob_gCc1">
  <div class="ob_gCc2">
    <a class="SelectRoleLink red" id="" href="#"> Add Role</a>
    <a class="SelectRoleLinkToRemove HiddenField" id="" href="#"> Remove Role</a>
  </div>
  <div class="ob_gCd"></div>
</div>
<div class="ob_gCc1">
  <div class="ob_gCc2">
    <a class="SelectRoleLink red" id="" href="#"> Add Role</a>
    <a class="SelectRoleLinkToRemove HiddenField" id="" href="#"> Remove Role</a>
  </div>
  <div class="ob_gCd"></div>
</div>