Как использовать $ (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 pointed out, это то, для чего нужен CSS.

Но you've said вы хотите сделать это в JavaScript с JQuery, вы бы использовать 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 основы, а затем активный класс overide его для активной ссылки:

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>