如何在这个例子中使用$(this)？

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所指出的,这就是CSS的用途.

但是你已经说过想用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';
});