JQuery"；“显示更多”；功能

因此，我在理解JQuery以及如何执行“showmore”函数方面遇到了一些困难。这是我正在处理的HTML文件，它来自Murach JQuery书籍

<main id="jdom">
    <h1>Murach's JavaScript and DOM Scripting</h1>
    <h2>Book description</h2>
    <div>
        <p>You can read other JavaScript books from start to finish and still not
        know how to develop dynamic websites like you want to. That's because 
        it's DOM scripting that lets you do things like run slide shows, handle image
        rollovers, rotate headlines, provide animation, and more. And it's a subject 
        that's glossed over or ignored in most other books.</p>
    </div>
    <div class="hide">
        <p>But now, you can go from JavaScript beginner to DOM scripting expert in a 
        single book! Fast-paced, professional, and packed with expert practices, our 
        new JavaScript book guides you through each step as you learn how to program 
        sites that enhance the user experience and ensure browser compatibility.</p>
    </div>
    <a href="#">Show more</a>

---

因此，我发现代码中的bug有点困难。如果我不正确地将类hide拉入classToggle方法中。如果您能帮助我更深入地了解我的错误所在，我们将不胜感激

您引用了错误的要隐藏的元素。这是一个常见的错误，但我想你可能对这个所指的内容有点困惑。在单击事件函数中，

此

指的是单击的

元素。因此，引用

$（this）

并切换

.hide

类不是您想要做的事情

我假设您想隐藏已经有

.hide

类的元素。因此，您需要在事件处理程序中选择它。您可以利用单击的

元素

$（this）

与其同级元素之间的关系来选择正确的

。使用

.hide

类可以有多个图书描述，因此，您只想显示相关的图书描述，而不是所有图书描述

$('a').click(function() {
  var $element = $(this).siblings('div.hide');
  $element.show();
});

我有几个不清楚的问题：

• 是否需要从元素中删除

  hide

  类？还不清楚CSS规则是否隐藏了该元素，或者jQuery是否隐藏了该元素
• 假设我想重新隐藏元素，但是隐藏类被删除了。您如何轻松地选择它？也许取消这门课不是一个好办法

---

主要问题是，您正在对$（此）的clickhandler中执行一些jquery操作。在另一个jquery函数中调用$（this）总是引用最初调用它的元素

因此，当您调用

$（this）.toggleClass（“hide”）

时，您可以在

a

元素上切换hide类。我假设您实际上想要在div上切换具有附加内容的类。为了以最接近您在提供的代码中所做的方式实现这一点，您应该调用

$（this）.prev（）.toggleClass（“hide”）

还应将.next（）调用替换为.previous（），因为要显示/隐藏的div是上一个DOM元素（相对于

a

元素），而不是下一个

这里是一个对您提供的代码稍作修改的工作程序：

这里有一个更简单的例子：

---

祝您学习jQuery好运，并继续学习

当单击“查看更多”时，是否要显示

.hide

类文本？这就是我所要做的。本书中问题的另一部分可能会重复，即使用“显示较少”功能重新隐藏文本，“显示较多”显示隐藏文本。所以它是双向的。我只是停留在问题的第一部分。CSS隐藏了元素。div.hide{display:none；}。对不起，我应该包括我的CSSfile@itsgoingdown有一个很好的实现，但请注意我对他的回答的评论。

$('a').click(function() {
  var $element = $(this).siblings('div.hide');
  $element.show();
});