如何在插件中使用 .data() 将多个数据附加到 jquery 对象

Question

我有两个插件

$.fn.expect = function (expectation) {  
    return this.each(function () {  
        $(this).data('expectation', expectation);  
});  
}  
$.fn.isExpected = function () {  
    return $(this).data('expectation').call(this);  
}

第一个应该附加一系列条件示例：$input == 2, $input.ToUpperCase() == $input, ($input / 2) == 1)

第二个允许我调用附加到第一个插件的数据并在需要时评估条件。

问题是我的代码在当前状态下只允许我为每个 jquery 对象附加一个期望示例：

$(input1).expect("$(this).val() == 2");
$(input1).expect("$(this).val() == 4");
$(input1).val(2);
$(input1).isExpected(); //this returns false as it now expects 4

此外，我需要能够在代码的不同点附加条件，这样就排除了编写类似

的东西

$(input1).expect("$(this).val() == 2 || $(this).val() == 4");

提前感谢您的任何建议

Answer 1

您可以在对象数据存储中存储数组、对象或任何您想要的内容。所以你可以初始化一个数组，将它存储在数据存储中，然后在下一次调用中，只需将所需的值推送到数据存储（或者更好的是，一次推送多个值）：

$.fn.expect = function (expectation) {

    // get all the arguments as an array
    var expectations = Array.prototype.slice.apply(arguments);

    // for each matched element
    return this.each(function () {

        // gets the current expectations or set an empty array for the expectations
        var $this = $(this),
            data = $this.data('expectations') || [];

        // add all the passed expectations to the expectations array
        data = data.concat(expectations);

        // save the expectations 
        $this.data('expectations', data);

    });

};

$.fn.isExpected = function () {

    // reference to the current object
    var self = this;

    // use Array.prototype.every to test every expectation
    return $(this).data('expectations').every(function(expected) {

        // Apply the eval in a specific context using an intermediate function
        return (function() { return eval(expected); }).apply(self);

    });
}

那么您可以同时投放一个或多个期望：

$(input1).expect("$(this).val() == 2", "$(this).val() == 4");

检查我的工作示例：

$.fn.expect = function (expectation) {

    // get all the arguments as an array
    var expectations = Array.prototype.slice.apply(arguments);

    // for each matched element
    return this.each(function () {

        // gets the current expectations or set an empty array for the expectations
        var $this = $(this),
            data = $this.data('expectations') || [];

        // add all the passed expectations to the expectations array
        data = data.concat(expectations);

        // save the expectations 
        $this.data('expectations', data);

    });

};

$.fn.isExpected = function () {

    // reference to the current object
    var self = this;

    // use Array.prototype.every to test every expectation
    return $(this).data('expectations').every(function(expected) {
    
        // Apply the eval in a specific context using an intermediate function
        return (function() { return eval(expected); }).apply(self);
        
    });
    
}

// Sets the input
var input = $('#test');

// Add the expectations to the field, multiple at once, or multiple or single at different instances
input.expect("$(this).val() > 0", "$(this).val() > 10");
input.expect("$(this).val() == 15");

// Text button
$('#button').click(function() {
  console.log(input.isExpected());
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="test">
<input type="button" id="button" value="Test it!">

希望对您有所帮助。

如何在插件中使用 .data() 将多个数据附加到 jquery 对象

How to attach multiple data to a jquery object using .data() in a plugin

javascript

jquery

jquery-plugins