logo标签列表

jQuery - 如何选择父元素的子元素？

jqueryjquery-selectors
6

如果标题不准确，我很抱歉 - 我无法想出怎样措辞。

我有多个带有相同类名<div class="widget"></div>的小部件 - 每个小部件都有一个标题和内容，结构如下：

<div class="widget">
    <div class="widget-title">Title</div>
    <div class="widget-content">Content Here</div>
</div>

“widget-content”是隐藏的，当您单击“widget-title”时，内容会显示，并将类应用于“widget-title”，将其更改为“widget-title打开”。这部分工作正常，widget-content也会打开。
问题是，它在所有小部件上都打开widget content。它只应该打开用户单击标题的特定小部件中的widget内容，而不是全部。我不知道使用什么正确的语法，以便它仅打开用户单击标题的特定小部件中的widget内容。
以下是我目前拥有的代码：
$('.widget').find('.widget-title').click(function() {
  $('.widget-content').show('slow', function() {
    // Animation complete.
  });
  $('.widget').find('.widget-title').addClass("open");
});

有没有人能提供一个可行的例子？谢谢

1
发布您的HTML结构，我会提供更具体的答案。 - rgin
对我来说太晚回答了-.-但是，概念是你应该在点击事件中使用jQuery宝贵的'$（this）'来区分不同的小部件和你正在单击的实际jQuery对象。 - Ben Sewards
7个回答
19
$('.widget .widget-title').click(function() {
    $(this)
        .addClass("open")
        .parent().find('.widget-content').show('slow', function() {
            // Animation complete.
        });
});
很好，非常感谢您的指导，我会记住这个方法的！我原本以为我需要使用$(this)函数，但是我不确定该怎么用！现在完美解决了。 - Zach Nicodemous
3
为什么您在显示之前添加“open”类？在回调函数中添加类是否更好，因为那是它变成“打开”的时刻？ - Mark McCook
2
为什么不使用“children”？在这种情况下，Find()是不必要的，只会减慢脚本的速度。 - Bram Vanroy
2
我认为你需要这个：

我想你需要这个：

$('.widget').find('.widget-title').click(function() {
    $(this).parent().show('slow', function() {
        // Animation complete.
    }).addClass("open");
});

它打开所选 .widget-title 元素的父元素。
这个答案是不正确的。用户想要在小部件标题被点击时显示内容，而不是小部件本身，因为小部件已经可见。应该使用选择器 children()。 - Ben Sewards
2

试试这个：

$('.widget-title').click(function() {
  $(this).parent('.widget').children('.widget-content').show('slow', function() {
    $(this).addClass('open');
  });
});
1
0
$('div.widget-title').click(function() {
 var el = $(this);
 el.addClass('open');siblings('div.widget-content').show('slow',function() {
     //animation complete
 });
});

你需要使用'this'关键字将回调函数保持在上下文中，该关键字指向当前的DOM元素。否则，在回调函数中只会获取所有类名为widget-title的DOM元素。

0
0
如果您按类选择，jQuery 将选择该类的所有成员。您是否可以为此特定小部件或父容器设置 ID 或属性？
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接