如何分别触发每个类

Posted 2023-05-08

【中文标题】如何分别触发每个类

【英文标题】：how to trigger each class separately

【发布时间】：2013-12-06 18:48:48

【问题描述】：

下面是我的 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/

注意admin/mod 我很抱歉没有正确的主题行。实际上我不明白什么主题适合这个问题。你可以修复。谢谢

【参考方案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

【讨论】：

非常感谢。有用。如果一个打开然后另一个将关闭，怎么可能。我的意思是当我下一个时，另一个将关闭

是的，是的，是的>.......................... 完美:) 非常感谢您的超快速响应： )