在JQuery中选择具有相同类的特定元素

Question

我正在尝试创建一个select状态，使用两个div位于另一个上面的位置。一个相对定位，另一个绝对定位，底部位置为-200 of。在相对div的单击中，绝对定位的div将带着“成功”的信息滑入。

我现在已经开始工作了，但是如果用户决定要更改他们的选择，我需要更深入地删除“成功”div。现在，当我单击一个div时，所有div都显示“成功”状态。我想在不接触html/css的情况下修复这个问题。

这是JS小提琴。http://jsfiddle.net/LSan3/

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

谢谢！

Answer 1

我想这就是你想要的：

$(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/

因此，在单击函数中，我们首先隐藏所有的“内部-div”，然后找到并显示与“this”相关的一个，这是被单击的“main-div”。

如果这是你想要实现的，请告诉我。

编辑：还注意到我添加了.stop()，如果用户快速单击“main-div”，将确保您的动画不会重复多次。

Answer 2

尝试：

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

jsFiddle example

Answer 3

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

我觉得这可能对你有帮助。