JQuery“显示更多”功能

因此，我对理解JQuery以及如何执行“显示更多”功能有点麻烦。这里是我的工作我的HTML文件，该文件是从Murach JQuery的书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(); 
     } 

    }); 

});

工作，所以我有一个小麻烦察觉的bug的代码。如果我错误地将类隐藏到classToggle方法中。任何帮助，更深入了解我会出错的地方将不胜感激！

来源

2016-02-26 Suliman Sharif

你想在点击时显示'.hide'类文字看更多？ –

这就是我要去的 –

[阅读更多/更少的jQuery手风琴]可能的重复（http://stackoverflow.com/questions/19324740/read-more-less-jquery-accordion） –

您正在引用错误的元素来隐藏。这是一个常见的错误，但我认为你可能对this引用的内容有点困惑。在点击事件功能中，this指向点击的<a>元素。所以，引用$(this)并切换.hide类不是你想要做的。

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

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

我有几个问题含糊不清：

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

来源

2016-02-26 17:24:58 Brett

问题的其他部分在书中是要有一个显示较少的功能来重新隐藏文字，而显示更多的是显示隐藏文字。所以这两种方式都有效。我只是陷入了问题的第一部分。 CSS隐藏了元素。 div.hide {display：none;}。对不起，我应该包含我的CSS文件 –

@itsgoingdown有很好的实现，但请注意我对他的回答的评论。 – Brett

主要问题是你正在$（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和坚持下去！

来源

2016-02-26 17:40:49 glutengo

JQuery“显示更多”功能

回答

相关问题