Jquery在事件触发器上传递并存储一个动态变量答案

【问题标题】：Jquery pass and store a dynamic variable on event triggerJquery在事件触发器上传递并存储一个动态变量
【发布时间】：2012-07-23 08:31:29
【问题描述】：

我在输入文本框旁边有一个复选框。如果选中该复选框，则文本框将被清空并禁用。但是，我想将之前的值存储在该文本框中，以便在用户决定取消选中该复选框时将其返回到文本框中。这是我的代码：

function disablePath() {
    var currentPath;
    $('#user_strategy').on('change','input[value="all"]', function(){
        var that = $(this);
        if($(this).is(':checked')) {
            currentPath = that.next().val();
            that.next().attr("disabled", "disabled").val('');
        }
        else {
            that.next().removeAttr("disabled").val(currentPath);
        }
    });
}

因此，如果我只有一个复选框后跟一个文本框，那它就可以很好地工作。如果我有多个复选框-文本框组合，我会遇到麻烦，我会这样做。如果我选中多个复选框，则仅存储最后一个文本框内容 - 因此，如果我取消选中任何先前选中的框，则相应的文本框将填充最后一个文本框的值，该文本框的相关复选框已被选中，无论关系如何。有没有办法存储特定于前一个复选框的文本框的值？这是实时代码：

http://kaboukie.net/stackoverflow/

我认为我需要使用 eventData 但不确定如何使用，非常感谢任何帮助！

【问题讨论】：

标签： jquery events variables dynamic

【解决方案1】：

我建议将数据附加到元素本身，这可以使用 Jquery 的 .data() 方法完成。

这是代码，我已经测试过它可以正常工作；）

$(function() {
    function disablePath() {
        var currentPath;
        $('#user_strategy').on('change','input[value="all"]', function(){
            var that = $(this);
            if($(this).is(':checked')) {
                temp= that.next().val();
                that.data("currentPath" , temp);
                that.next().attr("disabled", "disabled").val('');
            }
            else {
                that.next().removeAttr("disabled").val(that.data("currentPath"));
            }
        });
    }
    disablePath();
});

【讨论】：

【解决方案2】：

将数据作为属性存储在复选框上怎么样？

$(function() {
    function disablePath() {
        var currentPath;
        $('#user_strategy').on('change','input[value="all"]', function(){
            var that = $(this);
            if($(this).is(':checked')) {
                $(this).attr("x:savedData", that.next().val());
                that.next().attr("disabled", "disabled").val('');
            }
            else {
               that.next().removeAttr("disabled").val($(this).attr("x:savedData"));
            }
        });
    }
    disablePath();
});

http://jsfiddle.net/ruwJT/

可能不是最佳做法，但它确实有效。

【讨论】：

【解决方案3】：

问题是当你设置 currentPath 时，它不记得哪个元素负责。

要解决这个问题，您可以为每个复选框分配一个唯一的 ID 属性，并将该 ID 作为键与文本框的值一起存储在键值对中。

或者，可以使用 jQuery 的 .data() 方法在任何元素上存储 abritraty 数据。见http://jsfiddle.net/EP5bg/

【讨论】：