我目前正在使用Murach的第3版js / jq作为参考。我正在尝试将文本从“显示更多”更改为“显示更少”，但无论我目前正在做什么，它似乎都无法正常工作。整个代码都有效，我只是在单击元素时尝试将“显示更多”中的文本替换为“显示更少”。谁能帮我吗？
现场演示，显示所有html，js和css：https://jsfiddle.net/yu8pzr0j/
$(document).ready(function(evt) {
$("#jdom a").click(function(){
$(this).prev().toggleClass("hide").toggleText();
if ($(this).attr("class") != "hide") {
$(this).next().hide().text("Show more");
}
else {
$(this).next().show().text("Show less");
}
evt.preventDefault();
});
});
试试这个
elem.hasClass()切换类$(document).ready(function() {
$("#jdom a").click(function(evt) {
var pre = $(this).prev();
if (pre.hasClass("hide")) {
$(this).text("Show less");
pre.removeClass('hide')
} else {
$(this).text("Show more");
pre.addClass('hide')
}
evt.preventDefault();
});
});* {
margin: 0;
padding: 0;
}
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 87.5%;
width: 650px;
margin: 0 auto;
padding: 15px 25px;
border: 3px solid blue;
}
h1 {
font-size: 150%;
}
h2 {
font-size: 120%;
padding: .25em 0 .25em 25px;
}
div.hide {
display: none;
}
ul {
padding-left: 45px;
}
li {
padding-bottom: .4em;
}
p,
a {
padding-bottom: .4em;
padding-left: 25px;
}
a,
a:focus,
a:hover {
color: blue;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Expand/Collapse</title>
<link rel="stylesheet" href="main.css">
<script src="http://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="subset_expansion.js"></script>
</head>
<body>
<main id="jdom">
<h1>Murach's HTML5 and CSS3 (3rd Edition)</h1>
<h2>Book description</h2>
<div>
<p>With this book, you can teach yourself how to design web pages the way the professionals do, by using HTML and CSS in tandem to structure and format the page content. It begins with a crash course that teaches you more about HTML and CSS than you
can learn from most full books. That includes a chapter on Responsive Web Design that shows you how to build responsive websites that will look and work right on all devices, from phones to tablets to desktop computers.</p>
</div>
<div class="hide">
<p>After that, this book shows you how to enhance your web pages with features like images, forms with built-in data validation, and audio and video clips. You'll also learn how to use JavaScript and jQuery to add features like image rollovers, image
swaps, and slide shows. You'll learn how to use jQuery UI and jQuery plugins to add features like accordions, tabs, carousels, and slide shows. And you'll learn how to use jQuery Mobile to develop separate websites for mobile devices.
</p>
</div>
<a href="#">Show more</a>
<h2>About the authors</h2>
<div>
<p><strong>Anne Boehm</strong> has over 30 years of experience as an enterprise programmer. She got started with Visual Basic in the days of VB5 and has been programming on .NET since its inception. She added C# to her programming repertoire in the
mid-2000s, and she's authored or co-authored our books on Visual Basic, C#, ADO.NET, ASP.NET, and HTML5/CSS3.</p>
</div>
<div class="hide">
<p><strong>Zak Ruvalcaba</strong> has been researching, designing, and developing for the web since 1995. His skill set ranges from HTML5/CSS3 and JavaScript/jQuery to .NET with VB and C#, and he's created web applications for companies like HP, Toshiba,
IBM, Gateway, Intuit, Peachtree, Dell, and Microsoft. He has authored or co-authored our books on HTML5/CSS3, jQuery, and Dreamweaver CC.</p>
</div>
<a href="#">Show more</a>
<h2>Who this book is for</h2>
<div>
<p>Due to our unique presentation methods and this book's modular organization, this is the right book for any web developer who wants to use HTML5 and CSS3 effectively. That includes:
</p>
<ul>
<li>budding web developers</li>
<li>web developers who haven't yet upgraded their websites to HTML5 and CSS3</li>
<li>web developers who need to expand and enhance their skillsets</li>
</ul>
</div>
<div class="hide">
<p>As we see it, mastering HTML5 and CSS3 will make any web developer at any level more effective.
</p>
</div>
<a href="#">Show more</a>
</main>
</body>
</html>看到这个解决方案
张贴在jsFiddle https://jsfiddle.net/95gjd3ew/5/
$("#jdom a").click(function(e){
e.preventDefault();
if($(this).data("expand")){
var cls = $(this).data("expand");
$("."+cls).toggle();
if($(this).text()=="Show more"){
$(this).html("Show less");
}else{
$(this).html("Show more");
}
}
});