在div事件期間來回更改文本

Question

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

});
});

Answer 1

嘗試這個

顯示和隱藏不更改元素的類名。它只是更改顯示屬性
所以你需要根據條件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 個解決方案

解決方案1
0 已采納 2019-03-28 08:00:25

解決方案2
0 2019-03-28 08:00:44

在div事件期間來回更改文本

問題描述

2 個解決方案

解決方案1 0 已采納 2019-03-28 08:00:25

解決方案2 0 2019-03-28 08:00:44

解決方案1
0 已采納 2019-03-28 08:00:25

解決方案2
0 2019-03-28 08:00:44