Question

我有一个快速的小切换，可以在有人点击它时更改按钮的文本。它有效，但不是第一次点击，出于某种原因？再点击一下，它工作正常。有什么想法吗？

＆＃13;

$( document ).ready(function() {
  $(".btn-archive-header").click(function(){
        var text = $(this).text() == 'VIEW ARCHIVE' ? 'CLOSE ARCHIVE' : 'VIEW ARCHIVE';
        $(this).text(text);
    });
});

＆＃13;

<div class="btn-archive-header">
    VIEW ARCHIVE
</div>

＆＃13;

Answer 1

您需要使用 $。trim（）

$.trim($(this).text());

所以你的代码将是

$( document ).ready(function() {
  $(".btn-archive-header").click(function(){
        var text = ($.trim($(this).text()) == 'VIEW ARCHIVE') ? 'CLOSE ARCHIVE' : 'VIEW ARCHIVE';
        $(this).text(text);
    });
});

DEMO

Answer 2

您的值中包含空格。删除它们并且有效。

改变这个：

<div class="btn-archive-header">
    VIEW ARCHIVE
</div>

到此：

<div class="btn-archive-header">VIEW ARCHIVE</div>

以下是您的代码应该如何：

＆＃13;

$( document ).ready(function() {
  $(".btn-archive-header").click(function(){
        var text = $(this).text() == 'VIEW ARCHIVE' ? 'CLOSE ARCHIVE' : 'VIEW ARCHIVE';
        $(this).text(text);
    });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="btn-archive-header">VIEW ARCHIVE</div>

＆＃13;

Answer 3

对从元素中获取的文本使用.trim() JavaScript方法：

＆＃13;

$( document ).ready(function() {
  $(".btn-archive-header").click(function(){
        var text = $(this).text().trim() == 'VIEW ARCHIVE' ? 'CLOSE ARCHIVE' : 'VIEW ARCHIVE';
        $(this).text(text);
    });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="btn-archive-header">
    VIEW ARCHIVE
</div>

＆＃13;

jquery - 文本没有打开第一次点击，然后工作正常

3 个答案: