在切换时更改 Bootstrap 按钮文本

Question

我目前有一个使用 Bootstrap 构建的折叠按钮，我正在尝试将文本从 'Read more' 转换为 'Read less'。我一直在尝试 jQuery，但就是无法正常工作。

<a data-toggle='collapse' href='#collapseExample' id='#collapseExample' class='text-center btn btn-default'>Read More</a>
    <div class='collapse' id='collapseExample'>
        <p class='readmore'>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
    </div>


$(document).ready(function(){
 $('#collapseExample').on('click', function () {
  var text=$('#collapseExample').val();
  if(text==='Read more'){
    $(this).text('Read less');
  } else{
    $(this).text('Read more');
 }
});
})

Answer 1

尝试使用 text() 而不是 val()

$(document).ready(function(){
    $('#collapseExample').on('click', function () {
        var text = $('#collapseExample').text();
        if (text==='Read more') {
            $(this).text('Read less');
        } else {
            $(this).text('Read more');
        }
    });
})

Answer 2

您可以设置一个名为 toggled 的变量，它的布尔值是 true/false。然后你可以检查 link 是否被点击。例如：

jQuery代码：

$(function() {
    var btn = $("[href='#collapseExample']");
    var toggled = false;
    btn.on("click", function() {
        if(!toggled)
        {
          toggled = true;
          btn.text("Read less");
        } else {
          toggled = false;
          btn.text("Read more");
        }
    });
});

和link：

<a data-toggle='collapse' href='#collapseExample' id='#collapseExample' class='text-center btn btn-default'>Read More</a>

实例：https://jsfiddle.net/8wmbzn28/

Answer 3

不要在无效的 html 页面中使用相同的 id 两次。
不要以 # 开头的 id 在 jquery 中使用时会导致很多问题。
字符串必须完全匹配，所以 Read more 不起作用，您需要使用 Read More.
不要使用 val() 而是使用 text() 或 html()

工作片段

$(document).ready(function(){
 $('#collapseExample1').on('click', function () {
  var text=$('#collapseExample1').text();
  if(text === "Read More"){
    $(this).html('Read less');
  } else{
    $(this).text('Read More');
 }
});
});

<a data-toggle='collapse' href='#collapseExample' id='collapseExample1' class='text-center btn btn-default'>Read More</a>
    <div class='collapse' id='collapseExample2'>
        <p class='readmore'>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
    </div>


  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
          <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
          <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

在切换时更改 Bootstrap 按钮文本

Changing Bootstrap button text on toggle

jquery

button

toggle

collapse

twitter-bootstrap