Question

所以我在理解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方法中。任何有助于更深入了解我出错的地方的帮助都将非常感激！

Answer 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是否存在。
说我想重新隐藏元素，但隐藏类被删除了。你会如何轻松选择它？也许不能去除课程。

Answer 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并继续前进！

JQuery“显示更多”功能

2 个答案: