jQuery“显示更多”功能

Question

因此，我在理解JQuery以及如何执行“显示更多”功能时遇到了一些麻烦。 这是我正在工作的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>

这是我正在使用的jQuery

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

   });

});

因此，我很难在代码中发现该错误。 如果我不正确地将类隐藏拉到classToggle方法中。 任何对我要去哪里有更多了解的帮助将不胜感激！

Answer 1

您引用了错误的元素来隐藏。 这是一个常见的错误，但是我认为您可能会对this指的有些困惑。 在click事件函数中， this是指单击的<a>元素。 因此，引用$(this)并切换.hide类不是您想要执行的操作。

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

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

我有几个不清楚的问题：

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

Answer 2

主要问题是您正在$（this）上的clickhandler中执行某些jquery操作。 在另一个jquery函数中调用$（this）始终引用最初被调用的元素。

因此，当您调用$(this).toggleClass("hide") ，会在a元素上切换hide类。 我假设您实际上是想在div上切换带有其他内容的类。 为了尽可能以与所提供的代码相同的方式实现此目的，应调用$(this).prev().toggleClass("hide") 。

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

这是一个工作提琴，对您提供的代码进行了一些细微改动： https : //jsfiddle.net/49b9mL2q/

这是一个更加简化的示例： https : //jsfiddle.net/2w48cg1x/

祝您学习jQuery并继续前进！