Выберите конкретные элементы с тем же классом в JQuery

Question

Выберите конкретные элементы с тем же классом в JQuery

0

Я пытаюсь создать состояние выбора, используя два div, расположенных сверху друг друга. Один из них позиционируется относительно, а один позиционируется абсолютно с нижним положением -200px. По щелчку относительного div, абсолютно позиционированный div будет перемещаться с сообщением "успех".

Я работаю прямо сейчас, но мне нужно углубиться, удалив "успех", если пользователь решит, что хочет изменить свой выбор. Также прямо сейчас, когда я нажимаю один div, все divs показывают состояние "success". Я хочу исправить это, не касаясь html/css.

Вот скрипка JS. http://jsfiddle.net/LSan3/

 $(document).ready(function(){
  $('.main-div').click(function(){
    $('.inner-div').animate({
    bottom: "0px"
    }, 300 );
  });
});

Благодаря !

QTaylor 14 апр. 2014, в 04:55

Источник

Теги:

javascript

jquery

html

css

onclick

3 ответа

0

  try the code given below:


  $(document).ready(function(){
   $('.main-div').click(function(){
  $('.inner-div').animate({bottom: "-1-0px"}, 300 );

   $(this).find('.inner-div').animate({
    bottom: "0px"
   }, 300 );
 });
});

Я думаю, это может вам помочь.

Naveen Chandra Tiwari 14 апр. 2014, в 01:53

0

Пытаться:

$(document).ready(function () {
    $('.main-div').click(function () {
        $('.inner-div').animate({
            bottom: "-100px"
        }, 0);
        $(this).find('.inner-div').animate({
            bottom: "0px"
        }, 300);
    });
});

Пример jsFiddle

j08691 14 апр. 2014, в 01:19

Ещё вопросы

MeltingDog · Accepted Answer · 2014-04-14T01-36-00.000Z

Я думаю, это то, что вы хотите:

$(document).ready(function(){
  $('.main-div').click(function(){
    $('.inner-div').stop().animate({
    bottom: "-100px"
    }, 300 );
    $(this).find('.inner-div').stop().animate({
    bottom: "0px"
    }, 300 );
  });
});

http://jsfiddle.net/LSan3/3/

Таким образом, в функции щелчка мы сначала спрячем все "внутренние-divs", затем найдем и покажем, какой относительный "этот" - это "главный", который был нажат.

Дайте мне знать, если это то, чего вы хотели достичь.

EDIT: Также обратите внимание, что я добавил.stop(), который будет следить за тем, чтобы ваша анимация не повторялась несколько раз, если пользователь нажимает кнопку "main-div" быстро

Отлично ! Это именно то, что я пытался сделать. Большое спасибо