如何在单击时更改按钮文本

How do I change my button text onclick?

本文关键字：按钮 文本 单击      更新时间：2023-10-12

我有一个jQuery幻灯片切换，我用它来显示和隐藏某些内容。它始终显示一个向下的箭头，但如果单击并显示文本，则箭头应指向上方。无论如何要这样做？

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
    $(document).ready(function(){
        $("button").click(function(){
            $("p").slideToggle();
        });
    });
</script>


<button>&#8595;</button>
<p>Wow!</p>
</body>
</html>
就

这么简单！

var toggled = false;
$("button").click(function() {
  if (!toggled) {
    $(this).html("&#8593;");
    toggled = true;
  } else {
    $(this).html("&#8595;");
    toggled = false;
  }
  $("p").slideToggle();
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>
  &#8595;
</button>
<p>
  Wow!
</p>

工作演示

$(document).ready(function() {
  $("button").click(function() {
    $("p").slideToggle();
    $(this).toggleClass('down up');
  });
});
.down {
  background-image: url("https://cdn3.iconfinder.com/data/icons/google-material-design-icons/48/ic_keyboard_arrow_down_48px-128.png");
  height: 130px;
  width: 130px;
}
.up {
  background-image: url("https://cdn3.iconfinder.com/data/icons/google-material-design-icons/48/ic_keyboard_arrow_up_48px-128.png");
  height: 130px;
  width: 130px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="down"></button>
<p>Wow!</p>

试试这样的事情.. :)

$(document).ready(function(){
    $("button").click(function(){
        $("p").slideToggle();
        $( this ).text('NewButtonText');
    });
});

此解决方案检查按钮是否有指向"UP"的箭头，如果有，则将其替换为"DOWN"，反之亦然。

    $(document).ready(function(){
        $("button").click(function(){
            if ($(this).text() == 'up'){
                $(this).html('&#8595;')
            }else{
                $(this).html('up');
            }
            $("p").slideToggle();
        });
    });

https://jsfiddle.net/gogaa33d/

试试这个它会起作用：

更改slideToggle()上的按钮html content。

目录 ： 

<button id="up">&#8593;</button>
<p>Wow!</p>

JQuery ：

$(document).ready(function(){
    $("button").click(function(){
   var arrowId = $(this).attr('id');
   if (arrowId == 'up') {
     $("button").html('&#8595');
     $(this).attr('id','down');
     } else {
     $("button").html('&#8593');
     $(this).attr('id','up');
     }
        $("p").slideToggle();
    });
});

演示 ： https://jsfiddle.net/64a6fafh/1/

使用$("button").text('Button Clicked');在单击时更改按钮的文本

$(document).ready(function(){
  $("button").click(function(){
    $("p").slideToggle();
    $("button").text('Button Clicked');
  });
});
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<button>&#8595;</button>
<p>Wow!</p>
</body>
</html>

我的回答是基于Jorrex的回答。我喜欢使代码简短且可读。简单的逻辑应该是简单的代码。IMO 下一个示例更易于阅读，尤其是在文件中有大量代码的情况下。

此外，您可以轻松地使用普通的Javascript，使其更加轻量级。

var toggled = false;
$("button").click(function() {
    this.innerHTML = !toggled ? "&#8593;" : "&#8595;";
    toggled = !toggled; // flip the value
    $("p").slideToggle();
});
基于

@Jorrex上述答案的建议。

您也可以使用例如按钮的类代替变量：

$("button").click(function() {
  if (!$(this).hasClass('toggled')) {
    $(this).html("&#8593;");
  } else {
    $(this).html("&#8595;");
  }
  $(this).toggleClass('toggled');
  $("p").slideToggle();
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>
  &#8595;
</button>
<p>
  Wow!
</p>

这样，如果在同一页面上需要多个这样的按钮，则会容易得多。

编辑：即使你不打算在一个页面上使用多个这样的按钮，在这里不使用变量仍然更安全，因为$(document).ready(function(){内的任何其他函数都可能干扰该变量 - 并让你浪费时间试图弄清楚为什么"奇怪的事情"(见这个例子(正在发生。(虽然错误在该示例中似乎很明显，但当代码库增长时，此类错误将变得更加难以发现。

相关文章：