как вызвать каждый класс в отдельности

0

Ниже приведен мой код для включения слайд-шоу jQuery. Очень простой код, но я не могу запускать его отдельно. Когда я нажимаю один, все будет запускаться одновременно. Я знаю, что это для всех тех же классов, но я не могу понять, что я буду с этим делать. У меня много такого дива.

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/

NB admin/mod Я извиняюсь за неправильную тему. на самом деле я не понимаю, какой предмет подходит для этой проблемы. вы можете исправить. благодаря

Теги:
slide
jquery-selectors

1 ответ

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');

    });

демонстрация

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

демонстрация

Поделиться
  • 0
    большое спасибо. оно работает. как это возможно, если один откроется, другой закроется. я имею в виду, когда я буду следующим, тогда другие будут близки
  • 0
    @AccoreLTD как этот jsfiddle.net/xw9Jp
Показать ещё 2 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню