Question

看一下这个脚本：

$(document).ready(function(){
    $("#btn").click(function(){
        if ($(this).text() == "Hello!"){
            $(this).text("Hey!");
            $("#div").slideToggle();
        return false;
        };

        if ($(this).text() == "Hi!"){
            $(this).text("Hallo!");
            $("#div").slideToggle();
        return false;
        };  
    });
});

当#btn有文本“Hello！”时按下#btn #btn中的文字变为“嘿！”当#btn有文字“嗨！”时按下#btn文本变为“你好！”。除了文本更改外，其余操作都是相同的。

有没有更好的方法用更少的代码来编写它？也许这样的事情（代码不起作用，但你看到了这个想法）：

$(document).ready(function(){
    $("#btn").click(function(){
        if ($(this).text() == "Hello!", "Hi!"){
            $(this).text("Hey!", "Hallo!");
            $("#div").slideToggle();
        return false;
        };  
    });
});

Answer 1

<强> jsBin DEMO

var arr = ["Hello!", "Hi!", "Hey!", "Aloha!", "Bok!", "Tchuss!"];

$("#btn").text( arr[0] ).click(function(){ // Set initial greet + Click handler.
    arr.push( arr.shift() ); // Push first key to last place...
    $(this).text( arr[0] );  // and get always the resulting first one
});

_{我不确定你要对slideToggle()做什么，所以我错过了那一部分。您可以根据需要随意申请。}

如果您使用锚<a>元素作为#btn，那么您希望使用event.preventDefault()（而不是{{}来阻止默认的浏览器操作行为1}}）喜欢：

return false;

Answer 2

这样的事情可能是：

$(document).ready(function(){
    $("#btn").click(function(){

         var text = $(this).text();
         var newText = text == 'Hello!' ? 'Hey!' : 'Hallo!';

         $(this).text(newText);
         $("#div").slideToggle();
         return false;
    });
});

Answer 3

你可以做一些

$(document).ready(function(){
    $("#btn").click(function(){
          $(this).text(function(i, text){
          $(this).text()=== "Hello!" ? $(this).text("Hii!") : $(this).text("Hello!");
          $("#div").slideToggle();
       return false;
      });
    });
});

切换到另一个文本

3 个答案: