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，它總是針對DOM中DOT1幻燈片。 'dot-active'類成功添加到dot1，但點擊2和3時，該類不會被添加。

我也試着明確地檢查真值if語句，像這樣：

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格：

$('.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()得到審查，並顯示與相關的股利類。

希望這會有所幫助。

$('.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代碼 -

$('.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'); 
    } 
});