Question

我正在使用一个非常简单的jQuery实时预览方法，该方法非常出色。但是，如何在不必为每个输入复制实时预览代码的情况下进行多次输入？

我现在有什么：

$(function() {
    $(".input-1").keyup(function() {
        var word=$(this).val();
        $(".code-1").html(word);
        return false;
    });
});

<div class="wrapper">
    <form class="comments">
        <label for="input-1">Content:</label><input name="input-1" id="input-1"></input>
    </form>
    <h3>Codes:</h3>
    <code><pre>&lt;h2&gt;<span class="code-1"></span>&lt;/h2&gt;</pre></code>   
</div>

我想要达到的目标（最多20个输入）：

<div class="wrapper">
    <form class="comments">
        <label for="input-1">Content:</label><input name="input-1" id="input-1"></input>
        <label for="red">Content:</label><input name="red" id="blue"></input>
        <label for="blue">Content:</label><input name="blue" id="blue"></input>
    </form>
    <h3>Codes:</h3>
    <code><pre>&lt;h2&gt;<span class="input-1"></span>&lt;/h2&gt;
    &lt;h2&gt;<span class="red"></span>&lt;/h2&gt;
    &lt;h2&gt;<span class="blue"></span>&lt;/h2&gt;
    </pre></code>   
</div>

Answer 1

基本上你需要两件事：

处理您关注的元素的keyup的选择器
一种在1中给出通用选择器的正确ID的提取方法。

这些方法有很多，例如第一个可以使用jQuery attribute starts with，jQuery find之类的东西来实现，而第二个是一个简单的字符串操作问题，可以是解决了JavaScript Regular Expressions或JavaScript String methods。

这只是一个例子

  $(function() {
        // Find all inputs whose name attribute begins with 'input-'
        $("input[name^='input-']").keyup(function() {
            var word=$(this).val();

            // Split the string using the '-' delimiter, and grab the second token
            var number = $(this).attr("name").split('-')[1];

            // Select element(s) with the class name 'code-' + the number found above
            $(".code-" + number).html(word);
            return false;
        });
    });

如何在不重复代码的情况下进行多个实时预览？

1 个答案: