Question

我正在尝试使用jQuery来切换类，我正在努力这样做。我有我的HTML结构和jQuery如下

<div class="mainFacet bmargin5">
   <div class="head line">
      <div class="facet-title" title="Click to collapse">
         <h2 class="unit-line">Processor</h2>
         <span class="icon minus"></span>
      </div>
   </div>
   <ul style="display:inline-block">
        <li>i3</li>
        <li>i5</li>
        <li>i7</li>
   </ul>
</div>

的jQuery

$('.facet-title').click(function () {
            $(this).parent().parent().children("ul").slideToggle();
            $(this).attr("title", ($(this).attr("title") == "Click to Collapse") ? "Click to Expand" : "Click to Collapse");
            $(this).toggle(function () {
                $(this).children("span").removeClass("minus").addClass("plus");
            }, function () {
                $(this).children("span").removeClass("plus").addClass("minus"); 
            });
        });

所以很简单。我想在facet-title点击上发生三件事。

＆＃39; ul＆＃39;应该从＆＃34;显示：inline-block＆＃34;切换到＆＃34;显示：无＆＃34;
＆＃39;标题＆＃39;应切换到＆＃34;点击折叠＆＃34;到＆＃34;点击展开＆＃34;
跨度的班级应该从＆＃34; icon减去＆＃34;至＆＃34; icon plus＆＃34;。现在，前两个事件发生了。它唯一没有的第三个事件。我做错了什么？

这是一个demo，显示我在前两个任务中的进度......

Answer 1

您在关闭时丢失了对this的引用。执行以下操作：

var that = $(this);
$(this).toggle(function () {
    $(that).children("span").removeClass("minus").addClass("plus");
}, function () {
    $(that).children("span").removeClass("plus").addClass("minus"); 
});

编辑：为未来的读者解释：this与变量不同，它会更改它在闭包中引用的对象。因此，为了保留对调用对象的引用（在上面的情况中为.facet-title），您需要将其分配给变量。然后可以在闭包内部使用此变量。

Answer 2

您可以使用：

$(this).closest('.mainFacet').find('span').toggleClass("minus plus");

<强> Working Demo

Answer 3

你可以这样做：

$('.facet-title').click(function () {

    var self = $(this); // create a variable to reference .facet-title

    $('span', self).toggleClass('minus plus'); // toggle plus/minus classes

    $(this).parent().siblings("ul").slideToggle(function() {

        var title;

        // Use self instead of $(this) which would refer to the ul
        self.attr('title') == 'Click to collapse' ? title = 'Click to expand' : title = 'Click to collapse';
        self.attr('title', title);
    });
});

如何在父单击时切换子元素的多个类

3 个答案: