jQuery写什么是写在一个字段到另一个DIV

Question

你好这是一个复杂的问题，我希望有人会很高兴来帮助我这个请求。

我有一些字段：

<label for ="message">Message: </label><input type="text" id="message" name="message"><br> 
<label for ="name">Status Name: </label><input type="text" id="name" name="name"><br> 
<label for ="link">Link: </label><input type="text" id="link" name="link"><br> 
<label for ="description">Description: </label><input type="text" id="description" name="description"><br> 
<label for ="picture">Picture: </label><input type="text" id="picture" name="picture"><br> 

无论是写在一个或多个字段上面应该在下面的元素被改写的。

<span id="message_preview"></span> 
<span id="name_preview"><a href=""></a></span> 
<span id="link_preview"></span> 
<span id="description_preview"></span> 
<span id="image_preview"><img src=""></span> 

所以，无论是写在该领域message会自动出现在元素message_preview

无论是写在name字段应该在无论是写在该领域的元素name_preview

被改写link应自动重写在元素link_preview和href内部，即name_preview以上的元素

无论是写在description场应在元素 description_preview

无论是写在picture字段应该元素image_preview

的img src内被改写被改写我知道这是一个复杂的一个，但我不是一个jQuery专家...我需要的完整功能=（（

你能帮我吗？

P.S.所有以上都应该发生每次用户都会更改这些字段中的文本。

Answer 1

这是我在JSFiddle中创建的带有注释的little example，它适用于除图片以外的所有内容，您应该尝试自己弄清楚。

// bind jquery to listen to every keyup event that happens in an input element 
$("input").keyup(function() { 
    // get the id of the element in which the event took place 
    var id=$(this).attr('id'); 
    // the appropriate value of the field 
    var value = $(this).val(); 
    // select the appropriate span (which is id_+preview in your case 
    // and insert the value in the span 
    $("#"+id+"_preview").html($(this).val()); 

}); 

Answer 2

检查这个小提琴

http://jsfiddle.net/LbFVn/

Answer 3

工作样本：

http://jsfiddle.net/oceog/rPjtr/

HTML：

<label for ="message">Message: </label><input type="text" id="message" name="message"><br> 
<label for ="name">Status Name: </label><input type="text" id="name" name="name"><br> 
<label for ="link">Link: </label><input type="text" id="link" name="link"><br> 
<label for ="description">Description: </label><input type="text" id="description" name="description"><br> 
<label for ="picture">Picture: </label><input type="text" id="image" name="picture"><br> 
<hr> 
message:<span id="message_preview"></span> 
name:<span id="name_preview"><a href=""><span id="text"></span></a></span> 
link:<span id="link_preview"></span> 
desc:<span id="description_preview"></span> 
img:<span id="image_preview"><img src=""></span> 

javascript：

$(function() { 
    $('input').keyup(function() { 
     showprev($(this)); 
    }); 
}); 

function showprev(inputf) { 
    console.log(inputf.val()); 
    var ival = inputf.val(); 
    var id = inputf.attr('id') + '_preview'; 
    if (id == 'link_preview') { 
     $('#name_preview a').attr('href', ival) 
    } 
    if (id == 'image_preview') { 
     $('#' + id + ' img').attr('src', ival); 
     return; 
    } 
    if (id == 'name_preview') { 
     $('#name_preview span#text').text(ival); 
     return; 
    } 
    $('#' + id).text(ival); 
}