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

img src字段中写的内容应该在元素image_preview的{{1}}内重写

我知道这是一个复杂的，但我不是一个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);
}

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

3 个答案: