更改輸入DIV，反之亦然

我有一些代碼來改變輸入到div的更改輸入DIV，反之亦然

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

我想是改回從DIV第二次點擊按鈕的輸入與同一ID和相同的價值。或者你可以說撤消我在第一次點擊時所做的。

來源

2014-01-31 ryuu

嘗試

$(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 
       }); 
      } 
     }); 
    }); 
});

演示：Fiddle

來源

2014-01-31 08:06:08

還有一種方法是純選擇jquery的（）選擇器。 –

@ C-link是的......我開始沒有'.toLowerCase（）'然後它很簡單 –

謝謝我試過了，但是用html注入造成了錯誤。你的工作正常。 – ryuu

您可以使用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/

來源

2014-01-31 08:09:57 Avisho

你可以保存現有的元素，並重新加載它們像這樣：

$(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]); 
      } 
     }); 
    }); 
});

一個fiddle is here。

來源

2014-01-31 08:12:23

更改輸入DIV，反之亦然

回答

相關問題