Почему функция .hasClass не работает корректно?

Question

Илларион

javascript

Почему функция .hasClass не работает корректно?

Добрый вечер всем. Не могли бы вы помочь мне разобраться с кодом? У меня есть следующий HTML-код: 
<br/> 
<pre><code class="html">&lt;div class="nextstep"&gt;
  &lt;div class="next"&gt;&lt;span&gt;1&lt;/span&gt;&lt;/div&gt;
  &lt;div class="next active"&gt;&lt;span&gt;2&lt;/span&gt;&lt;/div&gt;
  &lt;div class="next"&gt;&lt;span&gt;3&lt;/span&gt;&lt;/div&gt;
  &lt;div class="next active"&gt;&lt;span&gt;4&lt;/span&gt;&lt;/div&gt;
&lt;/div&gt;</code></pre>
<br/> 
а также простой скрипт: 
<br/> 
<pre><code class="javascript">if ($('.nextstep .next').hasClass('active')) {
    $('.nextstep .next').find('span').addClass('yes');
  } else {
    $('.nextstep .next').find('span').addClass('no');
  };</code></pre>
<br/> 
По логике, если у блока есть класс <code>active</code>, то к элементу следует добавить соответствующий класс. Однако, по какой-то причине код не работает так, как ожидается, и класс добавляется ко всем элементам. Что именно я делаю неправильно? Можете, пожалуйста, объяснить? 
<br/> 
<br/>

5 октября 2024 г. 20:04

Ответы на вопрос 3

Похожие вопросы

Answer 1

Ваша проблема заключается в том, как работает метод jQuery `.hasClass()` и в том, что вы используете его с выборкой, которая содержит несколько элементов. Давайте подробнее разберем, что происходит в вашем коде.

Когда вы используете `$('.nextstep .next')`, этот селектор выбирает **все** элементы с классом `next` внутри элемента с классом `nextstep`. В вашем случае это четыре `div`: два из них имеют класс `active`, а два — нет. 

Когда вы вызываете `$('.nextstep .next').hasClass('active')`, он проверяет **только первый элемент** из этой выборки. Если у первого элемента нет класса `active`, `.hasClass()` вернет `false`, и вы добавите класс `no` ко всем элементам `span`.

Чтобы исправить это, вам нужно проверять наличие класса `active` для каждого элемента по отдельности. Вот корректированный вариант вашего скрипта:

```javascript
$('.nextstep .next').each(function() {
  if ($(this).hasClass('active')) {
    $(this).find('span').addClass('yes');
  } else {
    $(this).find('span').addClass('no');
  }
});
```

В этом коде используется метод `.each()`, который проходит по каждому элементу из выборки по одному, и для каждого элемента выполняет проверку класса `active`, добавляя соответствующий класс (`yes` или `no`) к элементу `span` внутри него. 

Таким образом, `active` будет проверяться для каждого элемента `next`, и классы будут добавляться правильно.

Answer 2

$('.nextstep .next')
 - вернет все html элементы с такими классами 
 дальше ты работаешь со списком как с одним элементом, ожидаешь что код будет разбирать составляющие списка по отдельности 
 $(document).ready(function() {
       // проходим наши элементы циклом
	$('.nextstep .next').each(function(i, obj) {
		// проверяем условия для каждого элемента отдельно
		if ($(obj).hasClass('active')) {
			// применяем классы к соответствующему спану
			$(obj).find('span').addClass('yes');
		} else {
			$(obj).find('span').addClass('no');
		};
	});
});

Answer 3

Ваш код по сути просто переключает класс. 
 Это пишется в одну строку: 
 
 $('.nextstep .next').toggleClass('active');