Question

如果标题不准确，我很抱歉 - 我无法弄清楚如何说出来。

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

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

隐藏“窗口小部件内容”，当您单击窗口小部件标题时，将显示内容，并将一个类应用于窗口小部件标题，将其更改为“窗口小部件标题打开”。此部分适用于查找，并且窗口小部件内容也会打开。

问题是，它在所有小部件上打开小部件内容。它应该只打开单击标题的特定小部件中的小部件内容，而不是所有小部件。我不确定使用的语法是什么，所以它只打开用户点击标题的特定小部件的小部件内容。

这是我到目前为止的代码：

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

有人可以提供一个有效的例子吗？感谢

Answer 1

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

Answer 2

我想你想要这个：

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

它会打开所选.widget-title元素的父级。

Answer 3

试试这个：

$('.widget-title').click(function() {
  $(this).parent('.widget').children('.widget-content').show('slow', function() {
    $(this).addClass('open');
  });
});

Answer 4

我今天遇到了同样的问题，这是一个快速的解决方案 $（＆＃39; #parent＆gt; childNode＆＃39;）; http://api.jquery.com/child-selector/

Answer 5

.children() http://api.jquery.com/children/

我不完全确定我是否了解你，但这可能会对你有所帮助。

Answer 6

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

您需要使用引用当前DOM元素的'this'关键字将回调函数保留在上下文中。否则，你只需要在回调中使用一类widget-title来抓取所有DOM元素。

Answer 7

如果按类选择，jquery将选择该类的所有成员。您是否可以为此特定窗口小部件或父容器设置ID或属性？

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

7 个答案: