JQuery“显示更多”功能答案

【问题标题】：JQuery "Show more" functionJQuery“显示更多”功能
【发布时间】：2017-07-18 23:29:50
【问题描述】：

所以我在理解 JQuery 以及如何执行“显示更多”功能时遇到了一些麻烦。这是我正在工作的 HTML 文件，来自 Murach JQuery Book

<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>

这是我正在使用的 Jquery

$(document).ready(function() {
   $("a").click(function() {
      $(this).toggleClass("hide");
       if ($(this).attr("class") != "hide") {
            $(this).next().hide();
       }
       else {
           $(this).next().show();
       }

   });

});

所以我在发现代码中的错误时遇到了一些麻烦。如果我错误地将类隐藏到 classToggle 方法中。任何能帮助我更深入地了解我哪里出错的帮助将不胜感激！

【问题讨论】：

您想在点击查看更多时显示.hide 类文本？
这就是我的目标
Read more/less jQuery accordion的可能重复

标签： jquery html

【解决方案1】：

您引用了错误的元素来隐藏。这是一个常见的错误，但我认为您可能对this 所指的内容有些困惑。在点击事件函数内部，this 指的是被点击的<a> 元素。因此，引用$(this) 并切换.hide 类不是您想要做的。

我假设您想隐藏已经具有 .hide 类的元素。因此，您需要在事件处理程序中选择它。您可以利用单击的<a> 元素$(this) 及其兄弟元素之间的关系来选择正确的<div>。您可以拥有多个带有 .hide 类的书籍描述，因此，您只想显示相关的，而不是全部。

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

我有几个不清楚的问题：

是否有必要从元素中删除hide 类？目前尚不清楚 CSS 规则是隐藏元素还是 jQuery 隐藏。
假设我想重新隐藏元素，但隐藏类已被删除。您将如何轻松选择它？也许删除课程不是要走的路。

【讨论】：

书中的另一部分问题是有一个show less功能来重新隐藏文本，而show more显示隐藏文本。所以它是双向的。我只是被困在问题的第一部分。 CSS 隐藏元素。 div.hide {显示：无；}。抱歉，我应该包含我的 CSS 文件
@itsgoingdown 有一个很好的实现，但请注意我对他的回答的评论。

【解决方案2】：

主要问题是您正在 $(this) 上的 clickhandler 内执行一些 jquery 操作。在另一个 jquery 函数中调用 $(this) 总是引用它最初调用的元素。

因此，当您调用 $(this).toggleClass("hide") 时，您会切换 a 元素上的隐藏类。我假设您实际上想用其他内容来切换 div 上的类。要以与您在提供的代码中所做的最接近的方式实现这一点，您应该调用$(this).prev().toggleClass("hide")。

您还应该用 .previous() 替换您的 .next() 调用，因为您要显示/隐藏的 div 是前一个 DOM 元素（与 a 元素相关），而不是下一个。

这是一个对您提供的代码稍作改动的工作小提琴：https://jsfiddle.net/49b9mL2q/

这里有一个更简单的：https://jsfiddle.net/2w48cg1x/

祝你学习 jQuery 好运并继续前进！

【讨论】：