时间戳

首页 > 解决方案 > 在 div 事件期间来回更改文本

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

问题描述

我目前正在使用 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();

});
});

标签： javascriptjquery

解决方案

试试这个

  1. 显示和隐藏不改变元素的类名。它只是改变显示属性
  2. 所以你需要根据条件切换类elem.hasClass()
  3. 您需要将类名更改为前一个元素。因此在条件之前定义前一个元素

$(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>

推荐阅读