Question

我制作了一个小琐碎的脚本，我在那里检查该类是否存在，然后应用逻辑。

这是：

if($('h3').is('.ui-accordion-header-active')){
   $('h3').css('background', 'red');
}
else {
    $('h3').css('background', 'black');
}

你可以看到它非常简单。现在，假设我在页面上有多个h3元素，并且我想让浏览器知道哪个元素已应用class。我试过放置$(this)，但这并没有做多少。当然，我可以指定ID并按IDs定位元素，但我不想这样做。

如何使其更具动态性，以便可以使用$(this)或$('h3' > this)之类的内容？

感谢。

Answer 1

作为Rory pointed out，这就是CSS的用途。

但是you've said你想用jQuery在JavaScript中做，你可以在一般情况下使用each循环，或者在这个特定情况下使用css循环：

一般情况：

$('h3').each(function() {
    var $this = $(this);
    if ($this.is('.ui-accordion-header-active')) {
        $this.css('background', 'red');
    }
    else {
        $this.css('background', 'black');
    }
});

......也可以写得更简单：

$('h3').each(function() {
    var $this = $(this);
    $this.css('background', $this.is('.ui-accordion-header-active') ? 'red' : 'black');
});

但是由于我们使用css设置了一个属性，我们可以使用css函数来调用回调：

$('h3').css('background', function() {
    return $(this).is('.ui-accordion-header-active') ? 'red' : 'black';
});

此外，$this.is('.some-class')可以更有效地编写$this.hasClass('some-class')（避免启动完整的选择器匹配引擎）。

事实上，在现代浏览器上，我们可以避免$(this)完全使用classList来提高效率：

$('h3').css('background', function() {
    return this.classList.contains('ui-accordion-header-active') ? 'red' : 'black';
});

Answer 2

正如所指出的那样 - CSS是这里必需的答案

h3{background:black}
.ui-accordion-header-active{background:red}

这比任何jvascript / jquery解决方案要快得多，但是如果你想用jQuery做 - 你不需要迭代任何东西 - 只需使用选择器如下：

 $('.ui-accordion-header-active').css('background', 'red');

您仍然应该将h3背景设置为css基础，然后活动类将覆盖活动链接：

h3{background:black}

＆＃13;

h3{background:black;color:white}
.ui-accordion-header-active{background:red}

＆＃13;

<h3>H3 test</h3>
<h3 class="ui-accordion-header-active">H3 ui-accordion-header-active test</h3>

＆＃13;

如何在这个例子中使用$（this）？

2 个答案: