Question

我有两个链接，一个用于＆＃34;添加角色＆＃34;第二个＆＃34;删除角色＆＃34;。我想用jQuery来改变＆＃34;删除角色＆＃34;链接时＆＃34;添加角色＆＃34;单击。我已经管理了大部分内容并保留了其他功能，但我遗漏了一些东西，发现用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将搜索最近的祖先。使用siblings删除当前元素的兄弟。

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

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

<强>演示

＆＃13;

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

＆＃13;

<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>

＆＃13;

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

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

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

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

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

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

    $(this).next().css("color", "green");

});

DEMO 一种选择是使用.next()

Answer 3

另一种方法是在selected按钮中添加Add Role类，并使用CSS设置Remove Role按钮的样式。

// Javascript
$(".SelectRoleLink").on("click", function () {
   var isSelected = $(this).hasClass('selected');
   if(isSelected) {
     $(this).removeClass('selected');
   } else {
     $(this).addClass('selected');
   }
}

并相应地设计风格

/* CSS */
a.selected {
  color: red;
}

a.selected + .SelectRoleLinkToRemove {
  color: green;
}

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

的jQuery

3 个答案: