如何分別觸發每個類

Question

以下是我用於jQuery幻燈片開關的代碼。非常簡單的代碼，但我不能分別觸發每個。當我點擊一個時，所有內容都將被同時觸發。我知道這是所有同班同學，但我不明白我會怎麼做。我有很多這樣的div。

HTML

<div class="answerarea"> 
    <div class="answer"><a class="ans">go</a></div> 
    <div class="answertxt"> show this</div> 
</div> 
<div class="answerarea"> 
    <div class="answer"><a class="ans">go</a></div> 
    <div class="answertxt"> show this</div> 
</div> 
<div class="answerarea"> 
    <div class="answer"><a class="ans">go</a></div> 
    <div class="answertxt"> show this</div> 
</div> 
<div class="answerarea"> 
    <div class="answer"><a class="ans">go</a></div> 
    <div class="answertxt"> show this</div> 
</div> 

CSS

.answerarea { 
    float: left; 
    width: 350px; 
    margin:20px; 
} 
.ans { 
    padding: 5px; 
    background-color: #990; 
    -webkit-border-radius: 3px; 
    -moz-border-radius: 3px; 
    border-radius: 3px; 
    cursor:pointer; 
} 
.answertxt { 
    background-color: #06C; 
    display:none; 
    color: #FFF; 
    padding: 2px; 
    float: left; 
} 
.answer { 
    float: left; 
} 

JS

$(document).ready(function(){ 
     $('.ans').click(function (e) { 
    e.stopPropagation(); 
    if($('.answertxt').hasClass('visible')) { 
     $('.answertxt').stop().hide('slide', {direction: 'left'}, 500).removeClass('visible'); 
    } else { 
     $('.answertxt').stop().show('slide', {direction: 'left'}, 500).addClass('visible'); 
    } 
    }); 
}); 

演示http://jsfiddle.net/JSkZU/

N.B. admin/mod我很抱歉沒有正確的主題行。實際上我不明白哪個主題適合這個問題。你可以修復。謝謝

Answer 1

請嘗試使您的選擇器更具體，你有什麼將選擇所有。

$('.ans').click(function (e) { 
     e.stopPropagation(); 
     var $this = $(this); //this represent the clicked element 
     //Get to the closest/parent and select next and do a toggle and toggleclass on it 
     $this.parent().next().stop().toggle('slide', { 
      direction: 'left' 
     }, 500).toggleClass('visible'); 

    }); 

Demo

.toggle()將切換元件的當前狀態和.toggleClass將添加/刪除基於其由於缺少/存在的類。

爲了瓦解其他的，你可以這樣做：

$(document).ready(function() { 
    $('.ans').click(function (e) { 
     e.stopPropagation(); //did you mean e.preventDefault(); 
     var $this = $(this), $answerTxt = $this.closest('.answer').next(); 
     $answerTxt.add($('.answertxt.visible')).stop().toggle('slide', { 
      direction: 'left' 
     }, 500).toggleClass('visible'); 
    }); 
}); 

Demo