jQuery toggleClass 针对正确的元素

Question

正在尝试学习 jQuery，特别是 toggleClass。

目标：加载具有设定高度的 div 并隐藏溢出...单击一个元素以显示整个 div。就像手风琴一样，但内容的顶部显示...点击显示其余部分。

这是 jQuery（jQuery 不是 $，因为我在 WPress 工作）...

jQuery('.openup').click(function() {
    jQuery('.clip').toggle();
    jQuery(this).toggleClass('clipactive');
    return false;
});

这是我的Fiddle

我需要帮助理解两件事：

1. 为什么类 'clipactive' 会被添加到单击的元素中？ “this”不是指上面一行中的“clip”吗？我如何让它成为目标？兄弟()>?

2. 当我切换类时，为什么“clip”会得到内联样式“display:none”？

这是否与“this”未正确定位有关？

Answer 1

1. 如 cmets 中所述，jQuery(this) 指的是单击的元素。

2. jQuery('.clip').toggle(); 将切换 .clip 类，这意味着它将显示或隐藏元素，无论它不是。因此，它将从 display:none; 更改为隐藏它，并从display:block; 更改为显示它。

我认为这是您想要的代码：

jQuery('.openup').click(function() {
    jQuery('.clip').toggle();
    jQuery('.clip').toggleClass('clipactive');
    return false;
});

Answer 2

1. 为什么类 'clipactive' 会添加到单击的元素中？ “this”不是指上面一行中的“clip”吗？我如何得到它 达到目标？兄弟()>?

this 指的是 click 被绑定到的元素。

我说“绑定到”是因为您可以将<span> 作为.openup 的子对象，但this 不会指代<span>，而是指.openup，因为那是您将事件绑定到什么。有关事件处理的更多信息可以在 https://learn.jquery.com/events/inside-event-handling-function/

找到

您可以通过几种不同的方式获得对.clip 的引用，下面我将展示使用data- 的代码，以便您可以为要定位的元素定义选择器：

HTML：

<div class="openup" data-target=".clip">Lorem Ipsum </div>
<div class="clip">...</div>

JS：

jQuery('.openup').click(function() {
    var target = $($(this).data('target'));
    target.toggleClass('clipactive');
    return false;
});

$(this).data('target')（指被点击的元素）获取data-target的值，这是我们想要定位的类，然后我们用$()包装它，这样jQuery就会通过选择器获取元素提供了$($(this).data('target'));，我们现在可以切换类。

1. 为什么当我切换类时“clip”会得到内联样式“display:none”？

这不是因为toggleClass，而是因为您在jQuery('.clip').toggle(); 视图中切换元素，该行与toggleClass 不同

更新 jsfiddle https://jsfiddle.net/b5u141gL/1/

---

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

显示或隐藏匹配的元素。

.data() https://api.jquery.com/data/

存储与匹配元素关联的任意数据，或在命名数据存储中返回匹配元素集中第一个元素的值。