单击链接时切换文本答案

【问题标题】：Toggle text when link is clicked单击链接时切换文本
【发布时间】：2018-05-25 12:18:13
【问题描述】：

我有以下代码可以将 div（称为 #extra）切换到视图中：

$('#more').click(function() {
    $('#extra').slideToggle('fast');
    return false;
});

我的点击功能是这个链接：

<a href="#" id="more">More about us</a>

当#extra div 可见时，如何将“更多关于我们”的文本更改为“更少关于我们”？当单击相同的链接以隐藏 div 时，我希望链接的文本变回“更多关于我们”。

【问题讨论】：

标签： jquery onclick toggle slidetoggle

【解决方案1】：

使用此代码：

$('#more').click(function() {
    jQuery(this).text('less about us');
    if($('#extra').is(':visible')){
          jQuery(this).text('Less about us');
    }else{
          jQuery(this).text('More about us');
    }
    $('#extra').slideToggle('fast');
    return false;
});

这里是演示：http://jsfiddle.net/AAFaY/

【讨论】：

【解决方案2】：

只需切换文本？

$('#more').click(function() {
    $('#extra').slideToggle('fast');
    $('#more').text(function(_,txt) {
        var ret='';

        if ( txt == 'More about us' ) {
           ret = 'Less about us';
           $(this).css('background','url(link/to/image1.png)');
        }else{
           ret = 'More about us';
           $(this).css('background','url(link/to/image2.png)');
        }
        return ret;
    });
    return false;
});

【讨论】：

【解决方案3】：

试试这个

$('#more').click(function() {
    var more = $(this);
    $('#extra').slideToggle('fast', function(){
        more.html(s.text() == 'More about us' ? 'Less about us' : 'More about us');
    });
    return false;
});

Demo

【讨论】：

【解决方案4】：

是的，对于这个 Dinesh 的解决方案可能是最有效的结束优雅在jQuery中，为了hure

$(document).ready(function() {   
    $('#more').click(function() {
        var s = $(this);
            $('#extra').slideToggle('fast', function() {
                s.html(s.text() == 'More..' ? 'Less..' : 'More..');
            });
            return false;
    });
});

#wrapp {
  height: 38vh;
  width: 40vw;
  margin: 50px 50px;
  left: 10%;
  background-color: blue;
  position: absolute;
}
#wrapp #more {
  display: inline-block;
  padding: 5px;
  background: yellow;
}  
#extra {
  height: 100px;
  width: 250px;
  position: relative;
  margin: 1.2vh auto;
}
#extra p {
  position: relative;
  color: red;
  text-align: center;
  vertical-align: center;
  padding-top: 3.6vh;
  font-size: 2.5em;
  font-weight: bold;  
}

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <link rel="stylesheet" type="text/css" href="css/main.css"> 
        <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
        <script type="text/javascript" src="js/main.js"></script>
    <body>
        <div id="wrapp">
            <header>
                <h1>Heading...</h1>
            </header>        
           
            <a href="#" id="more">Less..</a>                
            <div id="extra"><p>Whatewer...</p></div>      
            
        </div>
    </body>

【讨论】：

【解决方案5】：

$(document).ready(function() {   
    $('#more').click(function() {
        var s = $(this);
            $('#extra').slideToggle('fast', function() {
                s.html(s.text() == 'More..' ? 'Less..' : 'More..');
            });
            return false;
    });
});

#wrapp {
  height: 38vh;
  width: 40vw;
  margin: 50px 50px;
  left: 10%;
  background-color: blue;
  position: absolute;
}
#wrapp #more {
  display: inline-block;
  padding: 5px;
  background: yellow;
}  
#extra {
  height: 100px;
  width: 250px;
  position: relative;
  margin: 1.2vh auto;
}
#extra p {
  position: relative;
  color: red;
  text-align: center;
  vertical-align: center;
  padding-top: 3.6vh;
  font-size: 2.5em;
  font-weight: bold;  
}

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <link rel="stylesheet" type="text/css" href="css/main.css"> 
        <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
        <script type="text/javascript" src="js/main.js"></script>
    <body>
        <div id="wrapp">
            <header>
                <h1>Heading...</h1>
            </header>        
           
            <a href="#" id="more">Less..</a>                
            <div id="extra"><p>Whatewer...</p></div>      
            
        </div>
    </body>

$(document).ready(function() {   
    $('#more').click(function() {
        var s = $(this);
            $('#extra').slideToggle('fast', function() {
                s.html(s.text() == 'More..' ? 'Less..' : 'More..');
            });
            return false;
    });
});

#wrapp {
  height: 38vh;
  width: 40vw;
  margin: 50px 50px;
  left: 10%;
  background-color: blue;
  position: absolute;
}
#wrapp #more {
  display: inline-block;
  padding: 5px;
  background: yellow;
}  
#extra {
  height: 100px;
  width: 250px;
  position: relative;
  margin: 1.2vh auto;
}
#extra p {
  position: relative;
  color: red;
  text-align: center;
  vertical-align: center;
  padding-top: 3.6vh;
  font-size: 2.5em;
  font-weight: bold;  
}

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <link rel="stylesheet" type="text/css" href="css/main.css"> 
        <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
        <script type="text/javascript" src="js/main.js"></script>
    <body>
        <div id="wrapp">
            <header>
                <h1>Heading...</h1>
            </header>        
           
            <a href="#" id="more">Less..</a>                
            <div id="extra"><p>Whatewer...</p></div>      
            
        </div>
    </body>

【讨论】：

【解决方案6】：

我实际上建议使用 jquery 只切换类名并让 css 像这样切换文本：

$('.btn').click(function(){
  $(this).toggleClass('active');
});

.btn::before{
  content:"Show";
}

.btn.active::before{
  content:"Hide";
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#" class='btn'></a>

【讨论】：