在切换时更改引导按钮文本

Posted 2023-03-24

【中文标题】在切换时更改引导按钮文本

【英文标题】：Changing Bootstrap button text on toggle

【发布时间】：2017-08-07 15:09:53

【问题描述】：

我目前有一个使用 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');
 
);
)     

【参考方案1】：

不要在无效的 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>

【参考方案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');
        
    );
)     

【参考方案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/