Question

我的情况有点像这样，

<div>
   <div class="check">
     <p class="user-name">
       <a href=url>name</a>
     </p>
     <i class="user-icon"></i>
     <div class="activity">
       <p class="status">Status</p>
       <p class="stream">Stream</p>
     </div>
   </div>
   <div class="check">
     <p class="user-name">
       <a href=url>name</a>
     </p>
     <i class="user-icon"></i>
     <div class="activity">
       <p class="status">Status</p>
       <p class="stream">Stream</p>
     </div>
   </div>
</div>

并且，只要用户点击{{1}内的任何元素，我就.slideToggle() div class名称activity的{{1}} div } div名class。我想出了这个，

check

并且，正如所见，它不应该起作用，因为它以$(document).ready(function(){ $(".check").click(function(){ $(".activity").slideToggle(); }); });名称div对class所有activity进行操作。

我无法将class名称更改为id，因为这些名称会通过另一个function自动填充，并且更容易通过css进行样式设置和维护。

我希望它仅对div用户click采取行动。

我该怎么办？

谢谢：）

Answer 1

事件处理程序将在触发它的元素的上下文中调用，因此只需使用this来访问它。

您可以将其与jQuery的find方法结合使用，以查找关联的后代元素。

Answer 2

只需正确选择，并确保使用.activity代替.user-activity（不存在）：

$(".activity", this).slideToggle();

或

$(this).find(".activity").slideToggle();

请在此处查看：

$(document).ready(function(){
    $(".check").click(function(){
           $(".activity", this).slideToggle();
    });
});

.check .activity {display: none}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
   <div class="check">
     <p class="user-name">
       <a>name</a>
     </p>
     <i class="user-icon"></i>
     <div class="activity">
       <p class="status">Status</p>
       <p class="stream">Stream</p>
     </div>
   </div>
   <div class="check">
     <p class="user-name">
       <a>name</a>
     </p>
     <i class="user-icon"></i>
     <div class="activity">
       <p class="status">Status</p>
       <p class="stream">Stream</p>
     </div>
   </div>
</div>

Answer 3

您可以使用查找选择器在当前单击的div中查找活动元素：

$(".check").click(function(){
   $(this).find('.activity').slideToggle();
});

Answer 4

您也可以使用 Demo ：

$(document).ready(function(){
    $(".check").click(function(){
           $(this).children('.activity').slideToggle();
           //OR you may also use   $(this).find('.activity').slideToggle();
    });
});

如何从点击的“div”中检测“class”，有几个具有相同类名的项目？

4 个答案: