使用jQuery重置HTML元素

Question

我的div中有很多元素。 對於某些情況，我想將div元素的值重置為初始狀態。

有什么辦法嗎？

if($(window).width()<=960){
    $('#desktopCart').html(/i want to reset this element/);
    } 

    if($(window).width()>960){
    $('#mobileCart').html("/i want to reset this element/");
    }

Answer 1

首先克隆元素而不是保存內容。 然后使用replaceWith還原它。

  $(document).ready(function() {
      var divClone = $("#mobileCart").clone();
      if($(window).width()<=960){
    $('#desktopCart').html(/i want to reset this element/);
    } 

    if($(window).width()>960){
      $("#mobileCart").replaceWith(divClone);
    }
    });

有關更多參考，請參見以下鏈接。

JavaScript修改后，如何將<div>重置為原始狀態？

Answer 2

嘗試：

$( document ).ready(function() {
var initialValue =$('#mobileCart').html();
});
if($(window).width()<=960){
$('#desktopCart').html(initialValue);
} 

if($(window).width()>960){
$('#mobileCart').html(initialValue);
}

Answer 3

如果我有多個要素怎么辦？ 是否要定期保存元素的狀態？ 並定期重置它們？ 可能不只是其中一個....也許我會有a和p和div ，而且它們太多了。 但是我想減少打字嗎？ 我該怎么辦 ？

我很高興你問。

// Write Once: Use Anywhere functions

$.fn.reset = function () {    
    var list = $(this); // list of elements

    for(var i = 0, len = list.length; i < len; i++){ 
        list.eq(i).text(list.eq(i).data("initValue"));    
    }
};

$.fn.saveState = function () {
    var list = $(this); // list of elements

    for(var i = 0, len = list.length; i < len; i++){
        list.eq(i).data("initValue", list.eq(i).text());    
    }
}

$("div").saveState(); // simple call to save state instantly !

// value change!
$("div:nth-child(2)").text("99999");

$(window).resize(function () {
    if ($(window).width() <= 960) {
        $("div").reset(); // simple call to reset state instantly !
    }
});

DEMO ^{調整大小窗口}

Answer 4

使用jquery的.empty（）

$("#divId").empty();

它將刪除所有子元素和該特定元素中的文本。

如果要恢復div的初始狀態，則應將初始innerHtml保存到document.ready()變量中。 喜歡，

   var desktopCart;
   var mobileCart;
    $(document).ready(function(){
     desktopCart=$('#desktopCart').html();
     mobileCart=$('#mobileCart').html();

    });

然后隨時恢復html，

if($(window).width()<=960){
$('#desktopCart').html(desktopCart);
} 

if($(window).width()>960){
$('#mobileCart').html(mobileCart);
}