将输入更改为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]);
            }
        });
    });
});

这里有一个小提琴 。