Question

我在我的按钮上使用点击事件来更改图像，h1文本等内容。当我再次单击该按钮时，我希望将其更改回页面最初的显示方式。我该怎么做？以下是目前的相关代码：

<script>
    $(document).ready(function() {
        $("button").click(function() {
                $("h1").text("Heading 2");
                $("p").text("blah blah blah");
                $("#picture").attr({ src: "../img/img2.jpg", title: "a new image", alt: "descriptive picture"});
                $("button").text("Change back");
            });
        }); 
    </script>


<body>
    <h1>Heading 2</h1>
    <img src="../img/img1.jpg" alt="basic picture" id="picture">
    <p>Blah blah blah</p>
    <button>Next</button>
</body>

Answer 1

您可以将初始值存储在data-attributes中。刚做了一个示例Fiddle，其中有一个额外的div作为包装器来存储状态，并将初始值添加为默认数据值，例如像这样：<h1 data-default="Heading 1">Heading 1</h1>。

$("button").click(function () {
if ($(".container").data("state") == "default") {
    $("h1").text("Heading 2");
    $("p").text("blah blah blah");
    $("#picture").attr({
        src: "../img/img2.jpg",
        title: "a new image",
        alt: "descriptive picture"
    });
    $(".container").data("state", "changed");
    $("button").text("Change back");
} else {
    $("h1").text($("h1").data("default"));
    $("p").text($("p").data("default"));

    $("#picture").attr({
        src: $("#picture").data("defaultImg"),
        title: $("#picture").data("defaultTitle"),
        alt: $("#picture").data("defaultAlt")
    });
    $(".container").data("state", "default");
    $("button").text($("button").data("default"));
  }
});

为了避免初始值的双重输入，当首次单击按钮时，还可以将每个元素的初始值设置为数据属性值。通过调整调整Fiddle以将div-wrapper的初始值设置为＆＃34; start＆＃34;和调整后的脚本：

$("button").click(function () {
  if ($(".container").data("state") == "start") {
    $("h1").data("default", $("h1").text());
    $("img").data("defaultAlt", $("img").attr("alt"));
    $("img").data("defaultTitle", $("img").attr("title"));
    $("img").data("defaultImg", $("img").attr("src"));
    $("p").data("default", $("p").text());
    $("button").data("default", $("button").text());
  }
  if ($(".container").data("state") != "changed") {
  ....  // rest stays the same as in first script

供参考：http://api.jquery.com/jquery.data/

Answer 2

Try this Fiddle

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
  <h1>Heading 2</h1>

  <img src="http://home.iitk.ac.in/~amitkum/images/4.jpg" alt="basic picture" id="picture" height="100">
  <p>Blah blah blah</p>
  <button>Next</button>
</body>
<script>
  var img = 'http://home.iitk.ac.in/~amitkum/dp.jpg';
  $(document).ready(function() {
    $("button").click(function() {
      tmp = $('#picture').attr('src');
      $("h1").text("Heading 2");
      $("p").text("blah blah blah");
      $("#picture").attr({
        src: img,
        title: "a new image",
        alt: "descriptive picture"
      });
      img = tmp;
      $("button").text("Change back");
    });
  });
</script>

Jquery单击按钮更改文本，属性等，然后休息回原始

2 个答案: