Js табы в чем проблема?

Question

[Anton]

document.querySelector('.tab__titles').addEventListener('click', tabs);

function tabs(e) {
var target = e.target;
if (target.className === 'tab__title') {
var dataTab = target.getAttribute('data-tab');
var tabContent = document.querySelectorAll('.tab__content');
var tabTitle = document.querySelectorAll('.tab__title');
for (var i = 0; i < tabTitle.length; i++) {
tabTitle[i].classList.remove('is-active');
}
target.classList.add('is-active');
for (var i = 0; i < tabContent.length; i++) {
if (dataTab === i) { <-- в этом цикле всегда уходит в else почему?
console.log('BLOCK');
// tabContent[i].style.display = 'block';
}else{
// tabContent[i].style.display = 'none';
console.log('NONE');
}
}
} 
}

Answer 1

[Павел Корнилов]

if (dataTab == i)
Поменять сравнение равенства на 2 знака (без учета типизации).

Comments

[Anton]

Пробовал, таже ошибка.

[Павел Корнилов]

А что в ошибке пишут?

[Anton]

Самой ошибки то и нет просто всегда уходит в false

[Павел Корнилов]

А что возвращает это:
var dataTab = target.getAttribute('data-tab');

[Anton]

Это возращает атрибут data-tab

<!-- begin tabs -->
		<div class="tab__wrap">
			<div class="tab__titles">
				<div class="tab__title is-active" data-tab="0">tab 1</div>
				<div class="tab__title" data-tab="1">tab 2</div>
				<div class="tab__title" data-tab="2">tab 3</div>
			</div>
			<div class="tab__contentes">
				<div class="tab__content" style="display: block;">content 1content 1content 1content 1content 1content 1content 1content 1content 1content 1</div>
				<div class="tab__content">content 2content 2content 2content 2content 2content 2content 2content 2content 2content 2</div>
				<div class="tab__content">content 3content 3content 3content 3content 3content 3content 3content 3content 3content 3</div>
			</div>
		</div>
		<!-- end tabs -->

[Павел Корнилов]

Тогда должно работать.
А в таргет что попадает, не проверяли? Вдруг, текст вместо элемента приходит?

[Anton]

Все до цикла норм отрабатывает проверял

if (dataTab === i) { <-- в этом цикле всегда уходит в else почему?
console.log('BLOCK');
// tabContent[i].style.display = 'block';
}else{
// tabContent[i].style.display = 'none';
console.log('NONE');
}

[Anton]

https://jsfiddle.net/ziqq/s78t6td6/

[Павел Корнилов]

У меня все работает - https://jsfiddle.net/mjo27nLb/

[Павел Корнилов]

Для большей наглядности вывел в консоль номера блоков - https://jsfiddle.net/mjo27nLb/1/

Answer 2

[BB 8]

'dataTab === i' => потому что здесь false

Comments

[Anton]

Это я и сам понимаю, но вот почему?

[BB 8]

Anton, потому что Вы сравниваете строку с числом

[BB 8]

Anton, надо +dataTab

или двойное равно

[Anton]

Проверял по разному, та же проблема.

[BB 8]

Залейте на codepen или fiddle

[Anton]

https://jsfiddle.net/ziqq/s78t6td6/

[Егор Живагин]

Anton, так в нём все работает
Вы скорее всего кэш не почистили, когда сравнение меняли

[BB 8]

Anton, ++, да, код рабочий.

на нажатый вешается block, на остальные none

Answer 3

[Егор Живагин]

В else добавьте, чтоб не гадать в чём проблема
console.log(dataTab, i);

Что выводит?

Answer 4

[Anton]

Спасибо всем за помощь, проблема была в сравнении + кэш.

Answer 5

[Григорий]

Проблема в том что getAttribute всегда вытаскивает строку, а ваша переменная i - число. Вы пытаетесь сравнить число и строку