Question

我正在尝试创建一个重置按钮，通过按钮将我已更改的所有元素重置到我的页面上。除了如何将盒子重置为原始格式外，我已经弄明白了。我不允许使用CSS文件。我不知道最后一个$（＆＃34;＃box＆＃34;）之后会发生什么。这是我的HTML代码：

＆＃13;

function index() {
  var $box = $('#box');
  $("#button1").click(function() {
    $("#box").animate({
      height: '300px'
    });
  });
  $("#button2").click(function() {
    $("#box").css("background-color", "blue");
  });
  $("#button3").click(function() {
    $("#box").fadeOut();
  });
  $("#button4").click(function() {
    $("#box").
  });
};

$(document).ready(index);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<p>Press the buttons to change the box!</p>

<div id="box" style="height:150px; width:150px; background-color:orange; margin:25px"></div>

<button id="button1">Grow</button>
<button id="button2">Blue</button>
<button id="button3">Fade</button>
<button id="button4">Reset</button>

＆＃13;

Answer 1

如果不允许单独的css文件，您可以使用style标记。此外，animate函数会将该属性添加到样式属性，＆amp;在重置时，您需要删除/重置这些属性

＆＃13;

function index() {
  var $box = $('#box');
  $("#button1").click(function() {
    $("#box").animate({
      height: '300px'
    });
  });
  $("#button2").click(function() {
    $("#box").css("background-color", "blue");
  });
  $("#button3").click(function() {
    $("#box").fadeOut();
  });
  $("#button4").click(function() {
    $("#box").removeAttr('style')
  });
};

$(document).ready(index);

＆＃13;

.boxStyle {
  height: 150px;
  width: 150px;
  background-color: orange;
  margin: 25px
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>Press the buttons to change the box!</p>
<div id="box" class="boxStyle"></div>
<button id="button1">Grow</button>
<button id="button2">Blue</button>
<button id="button3">Fade</button>
<button id="button4">Reset</button>

＆＃13;

Answer 2

使用.clone方法并使用replaceWith将其恢复，如下所示

$(document).ready(function(){
     var boxClone = $('#box').clone();
     $("#button1").click(function() {
     $("#box").animate({
         height: '300px'
     });
 });

 $("#button2").click(function() {
     $("#box").css("background-color", "blue");
 });

 $("#button3").click(function() {
     $("#box").fadeOut();
 });

 $("#button4").click(function() {
     $("#box").replaceWith(boxClone.clone());
 });
});

如何使用按钮在jQuery中将框重置为其原始格式？

2 个答案: