Question

我目前有一个使用Bootstrap构建的折叠按钮，我试图转换来自“阅读更多”的文本。到“少阅读”＃。我一直在尝试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

请勿在无效的html页面中使用相同的ID两次。
在jquery中使用时，不要使用#启动ID会导致很多问题。
字符串必须完全匹配，因此Read more无效，您需要使用Read More。
请勿使用val()代替text()或html()

工作snipet

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

Answer 2

尝试使用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 3

您可以设置一个名为toggled的变量，它具有布尔值true/false。然后，您可以检查是否单击了链接。例如：

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

链接：

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

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

更改切换时的Bootstrap按钮文本

3 个答案: