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

Select Specific Elements With The Same Class In JQuery

本文关键字：同类 元素 JQuery 选择      更新时间：2023-09-26

我正试图使用两个位于彼此顶部的div创建一个选择状态。一个是相对定位的，一个是绝对定位的，底部位置为-200像素。单击相对div时，绝对定位的div将滑入并显示"success"消息。

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

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

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

谢谢！

我想这就是你想要的：

$(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"的一个——"this"是被点击的"主div"。

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

编辑：另外请注意，我添加了.stop（），如果用户快速点击"主div"，它将确保您的动画不会重复多次

尝试：

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

jsFiddle示例

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

我想这可能对你有帮助。

相关文章：