鍵入功能到表單元素

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>