如何在父点击时为子元素切换多个 类
How to toggle multiple classes for child element on parent click
我正在尝试使用 jQuery 切换 classes,但我正在努力这样做。我的 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 时发生三件事。
- 'ul' 应该从 "display:inline-block" 切换到 "display:none"
- 'title' 应该从 "Click to Collapse" 切换到 "Click to Expand"
- 跨度的 class 应该从 "icon minus" 切换到
"icon plus"。
现在,前两个事件发生得很好。它只是第三个没有的事件。我做错了什么?
这里 demo 显示我在前 2 个任务中的进度...
您在闭包中丢失了对 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
),您需要将其分配给一个变量。然后可以在闭包内使用此变量。
您可以使用:
$(this).closest('.mainFacet').find('span').toggleClass("minus plus");
你可以这样做:
$('.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);
});
});
我正在尝试使用 jQuery 切换 classes,但我正在努力这样做。我的 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 时发生三件事。
- 'ul' 应该从 "display:inline-block" 切换到 "display:none"
- 'title' 应该从 "Click to Collapse" 切换到 "Click to Expand"
- 跨度的 class 应该从 "icon minus" 切换到 "icon plus"。 现在,前两个事件发生得很好。它只是第三个没有的事件。我做错了什么?
这里 demo 显示我在前 2 个任务中的进度...
您在闭包中丢失了对 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
),您需要将其分配给一个变量。然后可以在闭包内使用此变量。
您可以使用:
$(this).closest('.mainFacet').find('span').toggleClass("minus plus");
你可以这样做:
$('.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);
});
});