我正在开发一个只需要在 jQuery 中完成的按钮测试。该网站相当困惑，但我想我已经简化了下面的问题。我正在尝试对这些按钮应用一些样式，但是该类已被广泛使用，并且需要排除一些特定实例。
<body>
<div>
<a class="button primary" href="...">change me</a>
</div>
<div class="ancestorClass">
<h2>
<a class="button primary" href="...">don't touch</a>
</h2>
</div>
</body>
目前我有以下...
jQuery("<style type='text/css'>
.change-button:before
{font-family: HPFlex2Software3ResourceIcons;
font-size: 18px;
font-style: normal;
content: \"\\e903\";
width: 10px;
top: 5px;
position: relative;
display: block;
float: left;
color: #01a982;
}
.change-button-gray:before
{
font-family: HPFlex2Software3ResourceIcons;
font-size: 18px;
font-style: normal;
content: \"\\e903\";
width: 10px;
top: 5px;
position: relative;
display: block;
float: left;
color: #707070;
}
</style>").appendTo("head");
jQuery(".button.primary").addClass("change-button").css({
"background-color": "transparent",
"color": "#000000",
}).mouseenter(function() {
$(this).removeClass("change-button");
$(this).addClass("change-button-gray");
}).mouseleave(function() {
$(this).removeClass("change-button-gray");
$(this).addClass("change-button");
});
In previous variations of tests on this site I was able to use the following to prevent specific buttons from being affected, but because of how the css is being added in on this variation it no longer works for me.
$('.button.primary').filter(function() {
return $(this).closest('.ancestorClass').length === 0;})
Here is the code I was using that got the error:
$('.button.primary').filter(function() {
var parent = $(this).parent().parent();
return parent.hasClass(".ancestorClass");
.addClass("change-button").css({
"background-color": "transparent",
"color": "#000000",
}).mouseenter(function() {
$(this).removeClass("change-button");
$(this).addClass("change-button-gray");
}).mouseleave(function() {
$(this).removeClass("change-button-gray");
$(this).addClass("change-button");
})});
最佳答案
有很多方法可以解决您的问题，但我会选择您的想法，而不是提出新的想法。而不是使用此代码:
$('.button.primary').filter(function() {
return $(this).closest('.ancestorClass').length === 0;})
我建议你使用这个:
$('.button.primary').filter(function() {
var parent = $(this).parent().parent();
return parent.hasClass("ancestorClass");
});
这是一个fiddle展示它是如何工作的。
另一种解决方案是使用 css 选择器 :nth-child(number) 但它不太美观，并且在添加或删除目标之前的元素时必须更改选择器(使用同一个类(class))。
关于javascript - 防止h2包裹的链接受到class的影响，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36162599/