Question

我正在进行需要仅在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");
    });

在以前的网站测试中我能够使用以下是为了防止特定按钮受到影响，但是因为如何在这个变化中添加css它不再有效对我来说。

    $('.button.primary').filter(function() {
    return $(this).closest('.ancestorClass').length === 0;})

以下是我使用的错误代码：

$('.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");
})});

Answer 1

有很多方法可以解决您的问题，但我会选择您的想法，而不是使用新的想法。而不是使用此代码：

  $('.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)，但它不太漂亮，当你添加或删除目标之前的元素（具有相同的类）时，你必须更改选择器。

防止包含在h2中的链接受到类的影响

1 个答案: