jQuery将字段中写入的内容写入另一个DIV

你好，这是一个复杂的问题，我希望有人能很好地帮助我这个请求

我有一些领域：

<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\u preview

在

name

字段中写入的任何内容都应在元素

name\u preview

在

link

字段中写入的任何内容都应在元素

link\u preview

和上面元素

name\u preview

内的

href

中自动重写

在

description

字段中写入的任何内容都应在元素中重写

说明\u预览

在

picture

字段中写入的内容应在元素

image\u preview

的

img src

中重写

我知道这是一个复杂的问题，但我不是jQuery专家……我需要完整的函数=((

你能帮我吗

另外，每当用户更改这些字段中的文本时，上述所有操作都应该发生。

这是我在JSFIDLE中创建的一个带有注释的示例，它适用于除图像以外的所有内容，您应该自己尝试解决这个问题

// 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());

});

检查这把小提琴

工作样本：

html:

---

你尝试过什么吗？你有没有遇到什么特别的问题？看看jQuery API。你特别感兴趣的文档是选择器、attr、html和val。我对jQuery几乎一无所知。我是一名PHP程序员。我是jQuery新手，这对我来说太难了。。。

<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>

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