Как прописать data атрибут у div с классом?

Question

[Darklt]

Есть слайдер у котрого есть data атрибут "slick-index"
Вопрос в том что нудно открывать другой div только когда у slick-index будет значение =2 и при этом иметь class= slick-active
?

$(function(){
 if($('.slick-active').data("slick-index") === "2"){
        $('.new_class').css("display", "block");
    }
   });

слайдер выглядит так:

<div class="slick-slide slick-current slick-active" data-slick-index="2" aria-describedby="slick-slide02">
<div class="new_class" style="display:none;">тест</div>							
</div>

Comments

[twobomb]

А что за слайдер, как можно подписаться на событие изменения слайда?

[Darklt]

slick slider

[Darklt]

суть в том что когда у слайда с data атрибутом будет класс slick-active, то выполнять действие, иначе не выполнять

Answer 1

[sergski]

const el = $('.slick-slide'),
      slickIndex = el.data("slick-index");

if( slickIndex == 2 && el.hasClass('slick-active') ){
    $('[data-slick-index="2"] .new_class').css("display", "block");
}

Comments

[Darklt]

Не пашет и ошибок нет :(

[Darklt]

Пробовал вот так, показывается на всех слайдах :(

if ( $('[data-slick-index="2"]').hasClass("slick-active")){
        $('.new_class').css("display", "block");
    }

[maksam07]

Darklt, а если:

const el = $('.slick-slide'),
      slickIndex = el.data("slick-index");

el.find(".new_class").eq(slickIndex).css("display", "block");

?
Константы из первого ответа такие же
И что у вас выводится при slickIndex?

[Darklt]

нет так тоже не работает.

"Константы из первого ответа такие же"

да всё такое же

[sergski]

Darklt, работает же

[Darklt]

Неа не работает, может изза того что data-index появляется уже после загрузки страницы изначально div

<div class="slick-slide">

[Darklt]

вообщем я так и не понял почему не работало видимо всё же потому что вся структура DOM строилась после загрузки страницы.

Помогло только так, с костылями

$('[data-slick-index="2"]').on('click', function(e){
	 $('[data-slick-index="2"] .new_class').css("display", "block");

	})
	
	
	$('.slick-next').on('click', function(e){
	 $('[data-slick-index="2"] .new_class').css("display", "block");

	})

Тоесть при прокрутке слайдера при нажатии на кнопку следующий а также на нажатие миниатюры