jQuery точки карусели на клике всегда идут к первому элементу

Question

Я строю карусель с основным jquery - я использую правило .css(), чтобы просто переключаться между непрозрачностью между каждым слайдом.

Способ, которым я хочу это сделать, - щелкнуть каждую точку, которую я хочу проверить, существует ли конкретный класс, и если он скрывает все остальные элементы и показывает это. До сих пор у меня есть:

$('.dot').click(function() { 
    $('.review-module--reviews').children().css('opacity', 0); 
    if ($('.dot').hasClass('dot1')) { 
     $('.review-one').css('opacity', 1); 
     $('.dot1').addClass('dot-active'); 
    } else if ($('.dot').hasClass('dot2')) { 
     $('.review-two').css('opacity', 1); 
     $('.dot2').addClass('dot-active'); 
    } else { 
     $('.review-three').css('opacity', 1); 
     $('.dot3').addClass('dot-active'); 
    } 
}); 

HTML:

<div class="review-module"> 
    <div class="review-module--reviews"> 
    <div class="review-one"> 

    </div> 
    <div class="review-two"> 

    </div> 
    <div class="review-three"> 

    </div> 
    </div> 
    <span class="slider-dots"> 
    <div class="dot dot1"></div> 
    <div class="dot dot2"></div> 
    <div class="dot dot3"></div> 
    </span> 
</div> 

Однако, когда я нажимаю на точках 2 и 3, он всегда нацеленного на dot1 слайд в DOM. Класс 'dot-active' успешно добавляется в dot1, но при нажатии 2 и 3 этот класс не добавляется.

Я также попытался проверки в явной форме истинного значения, в случае заявление следующим образом:

if ($('.dot').hasClass('dot1') === true)

Это лучший способ сделать это? Или я должен рассмотреть другой процесс мышления?

Answer 1

Ошибка в этом коде:

if ($('.dot').hasClass('dotX')) 

Что вы на самом деле делаете здесь, выбирает список всех элементов .dot и проверяет, имеет ли первый класс dotX. Как вы можете себе представить, это всегда будет поднимать первый элемент .dot, который имеет класс dot1.

Что вы, вероятно, хотите сделать, это проверить, был ли элемент, который был нажатым на, имеет класс dotX, для которого вам необходимо проверить только этот элемент.

Либо сделать это, используя текущую область обработчика щелчка:

if ($(this).hasClass('dotX')) 

или путем проверки цели события щелчка:

$('.dot').click(function(e) { 
    $('.review-module--reviews').children().css('opacity', 0); 
    if ($(e.target).hasClass('dot1')) { 

Answer 2

Я предлагаю использовать data-* attributes вместо так дать каждый .dot в data-review, которые ссылаются на соответствующий review DIV:

$('.review-module--reviews div').hide(); //Hide all the slides 

$('.dot').click(function() { 
    var review = $(this).data('review'); 

    $('.review-module--reviews div').hide(); //Hide all slides 
    $('.slider-dots .dot').removeClass('dot-active'); //Remove 'dot-active' class from all the dots 

    $(this).addClass('dot-active'); //Active the clicked dot 
    $('.review-'+review).show(); //Show the related slide 
}); 

Затем по щелчку просто получить обзор с помощью метода JQuery .data() и показать DIV с родственным класс.

Надеюсь, это поможет.

$('.review-module--reviews div').hide(); 
 

 
$('.dot').click(function() { 
 
    var review = $(this).data('review'); 
 

 
    $('.review-module--reviews div').hide(); 
 
    $('.slider-dots .dot').removeClass('dot-active'); 
 

 
    $(this).addClass('dot-active'); 
 
    $('.review-'+review).show(); 
 
});

.dot-active{ 
 
    color: green; 
 
    font-weight:bold; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<span class="slider-dots"> 
 
    <div class="dot dot1" data-review="one">dot1</div> 
 
    <div class="dot dot2" data-review="two">dot2</div> 
 
    <div class="dot dot3" data-review="three">dot3</div> 
 
</span> 
 
<br> 
 
<div class="review-module"> 
 
    <div class="review-module--reviews"> 
 
    <div class="review-one"> 
 
     Review-one 
 
    </div> 
 
    <div class="review-two"> 
 
     Review-two 
 
    </div> 
 
    <div class="review-three"> 
 
     Review-three 
 
    </div> 
 
    </div> 
 
</div>

Answer 3

Попробуйте это может быть, это может помочь вам -

JAVASCRIPT code-

$('.dot').click(function() { 
    $('.review-module--reviews').children().css('opacity', 0); 
    $('.dot').removeClass('dot-active'); 
    if ($(this).hasClass('dot1')) { 
     $('.review-one').css('opacity', 1); 
     $(this).addClass('dot-active'); 
    } else if ($(this).hasClass('dot2')) { 
     $('.review-two').css('opacity', 1); 
     $(this).addClass('dot-active'); 
    } else { 
     $('.review-three').css('opacity', 1); 
     $(this).addClass('dot-active'); 
    } 
});