Question

我目前正在使用Murach的第三版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();

});
});

Answer 1

尝试

显示和隐藏而不更改元素的类名称。它只是更改display属性
因此您需要根据条件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>

Answer 2

查看此解决方案

只需将数据属性添加到定位标记
为内容添加了与类相同的值
比起具有该数据属性的简单切换

发布在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");
        }
    }
});

在div事件期间来回更改文本

2 个答案: