单击某个 div 后如何更新 jQuery 函数中的“id”？答案

【问题标题】：How to update 'id' in jQuery function after clicking on some div?单击某个 div 后如何更新 jQuery 函数中的“id”？
【发布时间】：2018-07-14 17:51:17
【问题描述】：

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

第一步：每次点击某个 div 后，我想将变量“count”增加 1。

第二步：我想将更新的“count”用于我的其他函数，其中我将值从 id 属性在其 id 末尾包含更新的“count”的 select 元素复制到 id 属性也包含更新的“count”的输入元素" 在其 id 的末尾。

问题：更新的“计数”在函数内部顺利运行，我将值从选择复制到输入，但不是在我使用 bind() 的第一个#id 选择器中。这里，“count”保持不变为“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());
        });
    });

【问题讨论】：

this 的编写方式，事件绑定函数运行一次，当 count 为 0 时（在 jQuery 3 中也不推荐使用 bind 方法）...。取决于元素在页面，您可以使用事件冒泡或捕获来很好地完成此操作。或者，如果这不可行，您可以在 #clickBtn 函数中为 #selectElmnt 创建一个事件处理程序，以便在更新计数后创建一个事件处理程序。最后，您可以向#selectElmt 添加一个新类，并将您的事件处理程序绑定到该类（并在该 fn 中查找 countID。让我知道这是否不明确

标签： javascript jquery html css variables

【解决方案1】：

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

我不太清楚您要使用第二个功能实现什么 - 如果您想将更改/单击/keyup 事件绑定到具有各种 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() );
    });         
});

【讨论】：