我有两个链接,一个用于“添加 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");
});
最佳答案
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>
您可以使用以下优化解决方案:
selectedRoleID
未使用。可以删除。- 无需将点击链接的颜色更改为红色,因为它已经应用
- 使用类而不是内联样式
- 在事件处理程序中使用
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>
关于javascript - 使用 JQuery 删除与特定类的最近链接,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32734773/