jquery: girdileri girişlerle değiştirin

Question

Girdi değerlerini içeren bir yayı olan girişleri, bir düğmeyi tıklattığınızda tekrar değiştirebilecek şekilde değiştirmeye çalışıyorum. Bunun iki aşamada en kolay şekilde yapılacağını düşünüyorum - girişlerin önüne <span>[input value]</span> ekleyerek girdileri gizleyin. Tek sorun, ilk kısımda sorun yaşıyorum. 'Yapabilirim, tanımlanmamış (bu) başa ekleyin deyimi $ içeride Ancak

$('#container').find('input') 
    .parent() 
    .prepend('<span></span>') // this effectively creates: <span></span><input value=____> 

gibi şeyler görünüyor çalışıyorum, bu yüzden birkaç girişler olduğundan ben

.prepend('<span>'+$(this).children('input').val()+'</span>') 

yapamaz t Girdi değerini bir değişkene koymanız yeterlidir. Bunu nasıl yapardım? güncellenen soru için

Answer 1

:

$('input', context).each(function() { 
    $("<span />", { text: this.value, "class":"view" }).insertAfter(this); 
    $(this).hide(); 
}); 

You can view a more detailed demo here, with per-row edit toggling: Böyle bir şey (yorumlarla bu dayandırarak, satır başına bir düzenleme) yapabileceği

.

Bunun için .replaceWith() kullanmak isteyeceksiniz: Orijinal soru için

---

$('#container').find('input').each(function() { 
    $(this).replaceWith("<span>" + this.value + "</span>"); 
}); 

.each()this giriş öğesinin karşılık gelmekte olup, bir kapatma oluşturur yapabilirsiniz böylece Örneğin, this.value kullanın.

emin kodlama yapmak için bu gibi .text() kullanmak bunu biraz genişletmek, halledilir: En kolay çözüm için girişlerini değiştirmek olurdu gibi

$('#container').find('input').each(function() { 
    $(this).replaceWith($("<span />").text(this.value)); 
});​ 

You can try a demo here

Answer 2

Bana göre Düzenli olarak kenarlıklarını kaldırın (ve UI'nize bağlı olarak arka plan rengini değiştirin), bu da onları düzenli olarak bir <span> etiketi olarak gösterir.

function spanify() { 
    $('#container input') 
    .attr("readonly", "readonly") 
    .css("borderWidth", "0"); 
} 

function despanify() { 
    $('#container input') 
    .removeAttr("readonly") 
    .css("borderWidth", "auto"); 
} 

Bu uygun mu?