將輸入更改為div，反之亦然

Question

我有一些代碼可以將輸入更改為div

$(document).ready(function(){
    $('#btnChange').click(function(){
        $('#products, #mrp, #discount').replaceWith(function(){
                return '<div id="'+this.id+'">'+this.value+"</div>";
        });
    });
});

我想要的是在div的第二次單擊按鈕時更改它們以輸入相同的id和相同的值。 或者你可以說撤消我在第一次點擊時所做的事情。

Answer 1

嘗試

$(document).ready(function () {
    $('#btnChange').click(function () {
        $('#products, #mrp, #discount').replaceWith(function () {
            if ($(this).is('input')) {
                return $('<div />', {
                    id: this.id,
                    //use text to prevent html injection
                    text: this.value
                });
            } else {
                return $('<input />', {
                    id: this.id,
                    value: this.innerHTML
                });
            }
        });
    });
});

演示： 小提琴

Answer 2

你可以使用jQuery的.toggleClass() 。
例如，如果您有此表單：

<form id="myForm">
    <input type="text" id="myInput" class="visible clickable" />
    <div id="myDiv" class="hidden clickable">Hello</div>
</form>

和.visible和.hidden定義是：

.visible {
    display: inline;
}

.hidden {
    display:none;
}

那你的javascript應該是：

$('.clickable').click(function() {
    $('#myForm .clickable').toggleClass('visible').toggleClass('hidden');
});

這是一個有用的jsFiddle： http ： //jsfiddle.net/A4Lvu/

Answer 3

您可以存儲現有元素並重新加載它們，如下所示：

$(document).ready(function () {
    var collection = {};
    $('#btnChange').click(function () {
        $('#products, #mrp,  #discount').each(function () {
            if (this.nodeName.toLowerCase() === 'input') {
                collection[this.id] = this;
                $(this).replaceWith('<div id="' + this.id + '">' + this.value + "</div>");
            } else {
                $(this).replaceWith(collection[this.id]);
            }
        });
    });
});

這里有一個小提琴 。