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

Question

我正在尝试使用彼此位于顶部的两个div创建一个选择状态。 一个相对放置，一个绝对放置在-200px的底部位置。 单击相对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/

因此，在click函数中，我们首先隐藏所有“ inner-div”，然后查找并显示与“ this”相对的一个-“ 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示例

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

我认为这可能对您有帮助。