Question

我想通过单击按钮更改元素的内容，然后让它返回到原始消息。如果可能的话，如果使用切换类，我将如何做到这一点。

<doctype html>
<html>
<head>
<meta charset=utf-8>
<title>Day Practice</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"> </script>

</head>
<body>
<h1> HotDogs</h1>
<input type=button id=button value=button>
<script>
$("#button").click(function(){ 
$("h1").html("Change to this");
});


</script>

这会使用按钮更改标题，但是当我再次单击该按钮时，我不知道如何还原它。也许是Toggle Class，我不知道。

Answer 1

这应该解决：

$( "#button" ).toggle(function() {
  $("h1").html("Change here");
}, function() {
  $("h1").html("Revert back here");
});

Answer 2

设置标志以切换和检查，并在您更改时存储旧文本。一个例子：

var flag = false;
var old_text = "";

$("#button").click(function () {
    if (flag) {
        $("h1").html(old_text);
    } else {
        old_text = $("h1").html();
        $("h1").html("Change to this");
    }
    flag = !flag;    
});

Answer 3

你可以试试这个：

var alternate_text = "Change to this";
$("#button").click(function(){ 
    var temp = $("h1").html()
    $("h1").html(alternate_text);
    alternate_text = temp; // Switch the two instances of text.
});

Answer 4

由于您希望使用toggleClass()执行此操作，因此请转到：

$(document).ready(function(){

    var oldContent;

    $("#button").click(function(){
        if($(".newCont")[0]){
            $("h1").html(oldContent);
        } else {
            oldContent = $("h1").html();
            $("h1").html("New text here");
        }

        $("h1").toggleClass("newCont");
    });
});

更改元素内容

4 个答案: