返回到 jquery 和 html 中代码的开头答案

【问题标题】：Go back to beginning of code in jquery and html返回到 jquery 和 html 中代码的开头
【发布时间】：2013-05-29 17:21:59
【问题描述】：

当我在我的代码上按下一个按钮时，我想回到代码的开头，这样我就可以重新编写代码。例如，如果我在 html 中有这个：

<div id='a'></div>
<div id='b'></div>
<div id='c'></div>
<div id='d'></div>

然后 jquery 看起来像这样

 $(document).ready(function(){
    $('#a').click(function(){
      $('#a').hide();
      $('#b').toggle(400)
      $('#c').css('margin', '100px)
    });
 });

我怎么能得到它，所以在用户点击a后，a b和c消失了，但是在他们点击d后又重新出现a b和c

【问题讨论】：

已经'd'重新加载页面。
@LeeMeador 是的，但我也希望我能够计算隐藏多少次.. 还有其他方法吗？？
您可以使用包含更新计数的查询参数重新加载页面。

标签： jquery html hide reset

【解决方案1】：

也许你可以使用这个功能：

$('#d').click(function(){
  $('#a').show();
  $('#b').toggle(400)
  $('#c').css('margin', '0px)
});

希望对你有帮助。

【讨论】：

【解决方案2】：

在这里试试这个代码是demo

<div class="toHide" id="a">a</div>
<div class="toHide">b</div>
<div class="toHide">c</div>
<div id="d">d</div>


 $(document).ready(function(){
    $('#a').click(function(){
      $(".toHide").hide();
    });
     $('#d').click(function(){
      $(".toHide").show();
    });
 });

【讨论】：

【解决方案3】：

这个怎么样：

$('#d').click(function(){
  $('#a').show();
  $('#b').show();
  $('#c').css('margin', '0');
});

您还可以使用数据 API 保存初始状态（通过循环访问它们）：

 $("#a").data("original-state", $("<div></div>").html($("#a").clone())).html());

然后使用以下命令恢复它：

$("#a").replaceWith($("#a").data("original-state"));

【讨论】：

【解决方案4】：

我首先会使用 on 而不是 click（否则它不适用于我的方法）。

我也想保存一个“模板”。所以 DOM 就绪代码看起来像这样：

var template;
$(document).ready(function(){
    template = $('body').html();
    $(document).on('click', '#a', function(){
      $('#a').hide();
      $('#b').toggle(400)
      $('#c').css('margin', '100px)
    });
});

我会添加该事件：

$(document).on('click', '#d', function(){
    $('body').html(template)
})

将 $('body') 更改为您按钮的父容器。

【讨论】：

【解决方案5】：

有很多方法可以做到这一点。但是，如果您希望显示 id="d"，您只需向其添加类“按钮”即可。永远记住为这种技术使用类。

<div id='a' class="button"></div>
<div id='b' class="button"></div>
<div id='c' class="button"></div>
<div id='d' class="reset"></div>

而 jQuery 将是

$(".button").click(function(){
  $(".button").not(this).hide("slow");
});
$("#d").click(function(){
  $(".button").show("slow");
});

【讨论】：

【解决方案6】：

我选择了以下内容：http://jsfiddle.net/e57F9/1/

<div class="foo">
    <div id='a'>a</div>
    <div id='b'>b</div>
    <div id='c'>c</div>
    <div id='d'>d</div>
</div>

用这个来重置

// Make an original copy just in case they click 'd' first
var originalHtml = $(".foo").clone();
var clearCount = 0;
$(document).on("click", "#a", function(){
  // Backup the state right before clicking
  originalHtml = $(".foo").clone();
  $("#a").hide();
  $("#b").toggle(400);
  $("#c").css("margin", "100px");
});
$(document).on("click", "#d", function () {
  // Restore the object
  $(".foo").replaceWith(originalHtml.clone());
  clearCount++;
});

【讨论】：