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

【问题标题】：How to use $(this) in this example?在这个例子中如何使用 $(this)？
【发布时间】：2017-01-09 10:48:13
【问题描述】：

我制作了一个简单的小脚本，我在其中检查类是否存在，然后应用逻辑。

这里是：

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

如您所见，它非常简单。现在，假设我在页面上有多个 h3 元素，我想让浏览器知道哪个元素应用了 class。我试过放置$(this)，但这并没有多大作用。当然，我可以分配ID 并通过IDs 定位元素，但我不想这样做。

我怎样才能使它更加动态，以便可以使用$(this) 或类似$('h3' > this) 的东西？

谢谢。

【问题讨论】：

我已经在使用 .is 了，这不是这里的问题。
这个脚本有什么意义？只需使用 CSS：h3.ui-accordion-header-active { color: red; }
你需要循环，使用类似 $("h3").each 的东西
$('h3.ui-accordion-header-active').css('background', 'red') 和 $('h3').not('ui-accordion-header-active').css('background', 'black')
可能是题外话，因为问题（包括评论）不是试图解决特定问题，而只是想讨论可以实现某事的多种方式。

标签： javascript jquery html if-statement this

【解决方案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')（避免启动完整的选择器匹配引擎）。

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

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

【讨论】：

也许您应该将变量名称从 h3 更改为类似 current_h3 以避免混淆
@elementzero23 我通常使用$this，但认为h3 会更清晰。显然不是！ :-)
非常感谢。
我从来不知道hasClass('class') 比.is('.class') 更有效。你能详细说明一下吗？
@eric.dummy：我承认：我不知道是这样。我只知道它解决的问题要简单得多。解决一个更简单的问题通常比解决一个更广泛更复杂的问题要少。事实上，情况就是这样：jsperf.com/is-vs-hasclass3

【解决方案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}

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

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

【讨论】：