键入功能到表单元素

Question

我有一个脚本，可以使用keyup blur paste将一个字段复制到另一个输入字段中。 该脚本有效，但是我需要对其进行修改，使其也分为两个不同的表单元素，分别名为data-cost=""和debt="" ，而不是<div id="viewer">

这是我现在拥有的脚本：

$(function () {
    $('#account_balance1').on('keyup blur paste', function() {
        var self = this;
        setTimeout(function() {
            var str = $(self).val();
            $("#viewer").text(str.replace(/^\$/, ''));
        }, 0);
    });

    $("#viewer").text($('#Website').val().replace(/^\$/, ''));
});

这是html：

<!--This where I get the value from -->
<input type="text" class="balance" id="account_balance1" name="cardb" value=""/>

<!--the first 2 elements are where I need the values to go -->
<input data-cost="" debt="" value="" type="checkbox" name="f_2[]"/>  

Answer 1

如果需要将两个属性（数据成本和债务）分别设置为您的值，则需要：

$("input[data-cost][debt]").attr('data-cost',str.replace(/^\$/, ''));
$("input[data-cost][debt]").attr('debt',str.replace(/^\$/, ''));

Answer 2

只需使用那个选择器

$("input[data-cost][data-debt]")

Answer 3

我认为您可能对数据属性的用途有基本的误解？ 您知道它们不会与表格一起发布吗？ 我认为您正在寻找的是数据功能，该功能可让您设置数据属性http://api.jquery.com/data/ 。

也许您想要数据成本和数据债务？

因此，如果您的输入如下所示：

<input data-cost="" data-debt="" value="" type="checkbox" name="f_2[]" id="checkboxId" />

然后，您可以像这样在javascript中设置值：

var value1="some value";
var value2="another value";
$('#checkboxId').data('cost', value1);
$('#checkboxId').data('debt', value2);

我不认为像上面一样拥有一个简单地称为“债务”的属性是有效的。

Answer 4

我会这样做（setTimeout没用）：

$(function () {
    $('#account_balance1').on('keyup blur paste', function () {
        var self = this;
        var nextCheckbox = $(self).next("input[type='checkbox']");
        var str = $(self).val();
        $("#viewer").text(str.replace(/^\$/, ''));
        nextCheckbox.data({
            cost: str,
            debt: str
        });
        /*
        You won't be able to see changes if you inspect element,
        so just check in console
        */
        console.log(nextCheckbox.data());

});

}）;

并且您的html标记必须稍作修改：

<!--This where I get the value from -->
<input type="text" class="balance" id="account_balance1" name="cardb" value="" />

<!--the first 2 elements are where I need the values to go -->
<input data-cost="" data-debt="" value="" type="checkbox" name="f_2[]" />

<!--I added the viewer to check if everything works properly -->
<div id="viewer"></div>