Сбросить содержимое div

Question

У меня есть два div с некоторым содержанием deafult. Когда я нажимаю ссылку, он меняет html этого div. Поэтому мне нужно сбросить div html до исходного содержимого.

Пример:

<a id="click1" href="#">Add</a><a id="click2" href="#">Reset</a> 

<div id="click1_div"> 
    <p>some text</p> 
</div> 

Так что, когда я нажимаю на Добавить JQuery будет добавлять некоторые HTML, и когда я нажимаю на Reset он должен получить обратно старое содержимое HTML Div.

Любая идея?

Answer 1

Возможно, вы должны сохранить старый html перед установкой нового.

var old_html = $("#click1_div").html(); 

И затем использовать old_html значение для сброса innerhtml:

$("#click1_div").html(old_html); 

Answer 2

Я хотел бы добавить исходный HTML переменной будет использоваться, когда кнопка сброса нажата. Что-то вроде:

//save original html of div 
var originalHtml = $('#click1_div').html(); 

//when click on reset button, restore html 
$('#click2').on('click', function(e){ 
    e.preventDefault(); 
    $('#click1_div').html(originalHtml); 
}); 

Answer 3

Попробуйте это, .html() достану вам старое содержимое HTML сохранить его в переменной и тот же .html() метод заменит старое содержание с новым содержанием:

$(document).ready(function(){ 
    var old=""; 
    $("#click1").click(function(){ 
    old=$("#click1_div").html(); 
    $("#click1_div").html("asdfad"); 
    }); 

    $("#click2").click(function(){ 
    $("#click1_div").html(old); 
    }); 
}); 

DEMO FIDDLE

Answer 4

пример: http://jsfiddle.net/WebJedi/4Lz43nco/1/

$(document).ready(function() { 
    var isChanged = false, 
     $clickDiv = $('#click1_div'), 
     defaultText; 

    $('#click1').on('click', function(e) { 
     e.preventDefault(); 

     if(!isChanged) { 
      defaultText = $clickDiv.html(); 
      isChanged = true; 
      $clickDiv.html('<strong>CHANGE TEXT</strong>'); 
     } else { 
      alert('div is already changed'); 
     } 
    }); 

    $('#click2').on('click', function(e) { 
     e.preventDefault(); 

     if(isChanged) { 
      $clickDiv.html(defaultText); 
      isChanged = false; 
     } else { 
      alert('no change detected'); 
     } 
    }); 
}); 

Answer 5

вы не можете сбросить содержимое без сохранения начального значения. Вы можете сделать Somthing так:

var initialContent; 

$("#click1").click(function() { 
    initialContent = $("#click1_div").html(); 

    // replace content here 
} 

А на сброс вы можете записать его обратно в DIV:

$("#click2").click(function() { 
    $("#click1_div").html(initialContent); 
} 

Answer 6

$(document).ready(function(){ 
    var $container = $('#container'), 
     $content = $container.html(), 
     $newContent = '<br> Some content'; 

    $('#add').on('click', function(){ 
     $container.html($newContent); 
    }); 
    $('#reset').on('click', function(){ 
     $container.html($content) 
    }); 
}); 

http://codepen.io/mbrillaud/pen/doPRBL

Answer 7

Добавить эту функцию где-то на вашей странице (предпочтительно в)

function clearBox(elementID) 
{ 
    document.getElementById(elementID).innerHTML = ""; 
} 

Затем добавить кнопку мыши событие

<button onclick="clearBox('cart_item')" /> 

В JQuery (для справки)

Если вы предпочитаете JQuery вы могли бы сделать:

$("#cart_item").html("");