javascript - 单击某些 div 后如何在 jQuery 函数中更新 'id'？

Question

我想简单描述一下我的情况。

第一步:我想在每次点击某个 div 后将变量“计数”增加 1。

第二步:我想为我的其他函数使用更新的“count”，我从选择元素复制值，id 属性在其 id 末尾包含更新的“count”到输入元素，id 属性也包含更新的“count” "在其 ID 的末尾。

问题:更新后的“计数”在函数内部顺利运行，我将值从 select 复制到输入，但不是在我使用 bind() 的第一个 #id 选择器中。这里，“计数”保持不变为“0”。它导致正确的输入元素的值仍然被错误的选择元素更新，其 id 末尾为“0”。

谁能告诉我如何用我的变量解决这种情况？

        $(document).ready(function () {

        var count= 0;
        $("#clickBtn").on("click", function (event) {
            event.preventDefault();
            var textBox = document.getElementById("text");
            textBox.value = count;
            count++;
        });  

        $('#selectElmnt' + count).bind('change click keyup', function () {
            $('#inputElmnt' + count).val($(this).val());
        });
    });

Answer 1

函数 $("#clickBtn").on("click", function (event) 和 $('#selectElmnt' + count).bind在页面加载时运行(在 $(document).ready() 中，此时 count 的值为 零。

我不太清楚你想用第二个函数实现什么 - 如果你想将一个更改/点击/键盘事件绑定(bind)到所有具有各种 ID 的选择，你可以在开始时这样做，如果你想要根据当前计数触发某些操作，您需要在点击回调中执行此操作。

例如，如果要将select1 的值复制到input1，将select2 的值复制到input2，则无需担心计数。为此，您可以将计数添加为数据元素并添加一个类，以提供如下标记:

<select id="selectElmnt1" class="selectElmnt" data-count="1">...</select>
<select id="selectElmnt2" class="selectElmnt" data-count="2">...</select>
<select id="selectElmnt3" class="selectElmnt" data-count="3">...</select>

然后使用下面的javascript:

$(document).ready(function () {
    var count= 0;
    $("#clickBtn").on("click", function (event) {
        event.preventDefault();
        var textBox = document.getElementById("text");
        textBox.value = count;
        count++;
    });  

    $('.selectElmnt').on('change click keyup', function () {
        var count_id = $(this).data('count');
        $('#inputElmnt' + count_id).val($(this).val());
    });
});

但是，如果你想根据按钮触发某些东西，你需要这样的东西:

$(document).ready(function () {
    var count= 0;
    $("#clickBtn").on("click", function (event) {
        event.preventDefault();
        var textBox = document.getElementById("text");
        textBox.value = count;
        count++;
        // Trigger stuff here.  probably not bind, maybe just copy value now?
        $('#inputElmnt' + count_id).val( $('.selectElmnt' + count).val() );
    });         
});