Question

我有这个选择列表，用一个按钮加载许多文本输入框。所选值确定显示的文本输入框和按钮的数量。

<p class="clrHexList" id="hexVals">Colors: Hex (#) values
    <select name="howManyClrs" id="numOfClrs">
        <option value="0">0</option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
        <option value="6">6</option>
        <option value="7">7</option>
        <option value="8">8</option>
    </select>
</p>
<br />

我还有另一个文本输入框，其中加载了颜色选择器的HEX值。

<p><input type="text" id="origHex" /></p>

以下是所有文本输入框和按钮对。

<p class="clrHex" id="color1">1. &#35; <input class="hex" type="text" name="c1" id="clr1" /><button type="button" class="cpy" id="btn1">Copy from picker</button></p>
<p class="clrHex" id="color2">2. &#35; <input class="hex" type="text" name="c2" id="clr2" /><button type="button" class="cpy" id="btn2">Copy from picker</button></p>
<p class="clrHex" id="color3">3. &#35; <input class="hex" type="text" name="c3" id="clr3" /><button type="button" class="cpy" id="btn3">Copy from picker</button></p>
<p class="clrHex" id="color4">4. &#35; <input class="hex" type="text" name="c4" id="clr4" /><button type="button" class="cpy" id="btn4">Copy from picker</button></p>
<p class="clrHex" id="color5">1. &#35; <input class="hex" type="text" name="c5" id="clr5" /><button type="button" class="cpy" id="btn5">Copy from picker</button></p>
<p class="clrHex" id="color6">1. &#35; <input class="hex" type="text" name="c6" id="clr6" /><button type="button" class="cpy" id="btn6">Copy from picker</button></p>
<p class="clrHex" id="color7">1. &#35; <input class="hex" type="text" name="c7" id="clr7" /><button type="button" class="cpy" id="btn7">Copy from picker</button></p>
<p class="clrHex" id="color8">1. &#35; <input class="hex" type="text" name="c8" id="clr8" /><button type="button" class="cpy" id="btn8">Copy from picker</button></p>

我想为此使用jQuery。我希望能够按下按钮将文本复制到相应的文本输入框中。我有以下jQuery，但它不起作用。任何帮助表示赞赏。

$('button.cpy').each(function() {
    var boxNum = $('#numOfClrs').val();
    $('#btn' + boxNum).on('click', function() {
        $('input#clr' + boxNum).val() = $('#origHex').val();
    });
});

Answer 1

$('input#clr' + boxNum).val() = $('#origHex').val();

应该是

$('input#clr' + boxNum).val($('#origHex').val());

同时删除此内容：

$('button.cpy').each(function() {

当您使用$('#btn' + boxNum).on('click', function() ...

时，jQuery会为您执行此操作

最终代码：

var boxNum = $('#numOfClrs').val();
$('.cpy').on('click', function() {
    $('#clr' + boxNum).val($('#origHex').val());
});

Answer 2

嗯，这就是我如何为这只猫皮肤......为自己做好准备：P

注意：与其他建议atm不同，这是可扩展的，你可以拥有尽可能多的输入＆lt; - ＆gt;按钮对。

首先我们创建html DOM。

<p class="clrHexList" id="hexVals">Colors: Hex (#) values
<select name="howManyClrs" id="numOfClrs">
    <option value="0">0</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
    <option value="7">7</option>
    <option value="8">8</option>
</select>

然后，我们添加颜色选择器（现在只是一个文本框，稍后可以添加）和容器div来保存我们的输入和按钮对

<p><input type="text" id="origHex" /></p>
<div id="conty"></div>

现在我们添加了要添加的dom元素的示例模型

<p class="clrHex" id="color1" style="display:none">1. &#35; <input class="hex" type="text" name="c1" id="clr1" /><button type="button" class="cpy" id="btn1">Copy from picker</button></p>

现在是 ~~Fireworks~~ JQuery 的时间，

$(window).load(function() {
    $("#numOfClrs").change(function() {
        $("#conty").html("");
        var num = $(this).val();
        for (i = 1; i <= num; i++) {
            $("#color1").clone().attr('id', 'id' + i).css("display", "block").appendTo("#conty");
            $('input', '#id' + i).attr({'id': 'c' + i, name: 'c' + i});
            $('button', '#id' + i).attr('id', 'btn' + i);
        }
        $(".cpy").click(function() {
            $(this).prev('input').val($("#origHex").val());
        });
    });
});

我们已经完成了!!! JSbin!

Answer 3

$(document).on('click', '.cpy', function() {
    $(this).prev().val($('#origHex').val());
});

FIDDLE

如何获得一系列按钮，将文本从输入字段复制到一系列ID与按钮ID匹配的输入字段中

3 个答案:

最终代码：