带有多个参数的jQuery数据（）？

Question

我想在导致特定行为之前向元素添加数据变量，但这可能需要添加多个数据参数。我怎样才能做到这一点？

     $("#dlg_box").data("r_redirect","index.php").dialog("open");

Answer 1

你可以这样做：

var data = $("#dlg_box").data();   
data.r_redirect = "index.php";  
data.foo = "bar";

$("#dlg_box").dialog("open");

这取自here。

要检索您的值：

$("#dlg_box").data("r_redirect");
$("#dlg_box").data("foo");

Answer 2

JQuery 的data() 方法也接受一个JS 对象作为参数。因此，您可能会考虑通过 {"r_redirect": "index.php", "whatEver": "youWant" ...} 等传递多个符合您要求的值。

最终，data() 方法将您的参数转换为对象。因此，无论您是分别传递 Object 还是 Key 和 Value 都无关紧要

Answer 3

有多种方法可以将数据附加到 jQuery 对话框。如果您需要附加多个数据，我建议使用.data("myData", { /* OBJECT */ }，但是您也可以使用内联字符串和数组数据。至于为什么你的代码不起作用，代码太少了，可能有很多事情。但是，我附上了一个带有“参数”或数据的对话框的工作示例，供您参考。如果您发布更多标头代码，我感觉我们可能会发现语法错误或缺少“文档就绪”。只是一些想法。无论如何，我的例子：

jsFiddle

$(function() {
    //    Set the dialog to not open on load and clear all changes made when closed
    $("#dlg").dialog({
        autoOpen: false,
        modal: true,
        close: function(e) {
            $(this).children("input").nextAll("p").remove();
        }
    })    //    next i call for my first inner button which will show you how to get "attached" data
    .children("#attached").on("click", function(e) {
        var dlgData = $("#dlg").data("myData");
        $(this).after($("<p />").text(dlgData.data1 + " " + dlgData.data2));
    })    //    finally, the button that will get the string data that was added in the HTML
    .next("#inline").on("click", function(e) {
        var dlgData = $("#dlg").data("inline");
        $(this).after($("<p />").text(dlgData));
    });
    //    simply open our dialog
    $("button").on("click", function(e) { 
        //    HERE data is ATTCHED to our dialog just before opening
        $("#dlg").data("myData", { data1: "Hello", data2: "world" }).dialog("open") 
    });
});

Answer 4

$('#Dialog').data('data1', data1).data('data2', data2).dialog('open');

在初始化对话框时获取以下值：

var data1 = $(this).data('data1');
var data2 = $(this).data('data2');

Answer 5

在使用它之前，您应该了解一些规则！

添加

使用从 $('.selector').data() 返回的对象添加变量是可行的，因为数据对象通过引用传递，所以无论您添加属性，它都会被添加。如果您在另一个元素上调用 data()，它会被更改。就是这样……

添加对象会将对象置于数据对象内部，并“扩展先前与该元素一起存储的数据”。 - http://api.jquery.com/data/#entry-longdesc

也就是说给dataObj添加一个obj就变成了

dataObj === { /*previous data*/, obj : { } }

添加数组并不会扩展之前存储的数据，但也不会像简单值那样表现...

使用

如果您存储了简单的值，您可以将它们放入变量中，并在不更改数据对象的情况下对它们做您想做的事情。

然而

如果您使用对象或数组在元素上存储数据，请注意！

仅仅因为您将其存储到变量中并不意味着您没有更改数据值。 仅仅因为你将它传递给一个函数并不意味着你没有改变数据值！

它就是它本来的样子......除非它很简单......那么它只是一个副本。 :p

var data             = $("#id").data();  // Get a reference to the data object 
data.r_redirect      = "index.php";      // Add a string value
data.num             = 0;                // Add a integer value
data.arr             = [0,1,2];          // Add an array
data.obj             = { a : "b" };      // Add an object

                                         // but here is where the fun starts! 

var r_redirectString = data.r_redirect;  // returns "index.php", as expected.. cool
r_redirectString     = "changed"         // change the value and the compare :
data.r_redirect      == r_redirectString // returns false, the values are different

var oArr             = data.arr;         // Now lets copy this array
oArr.push(3);                            // and modify it.
data.arr            == oArr              // should be false? Nope. returns true.
                                         // arrays are passed by reference.
                                         // but..

var oObj             = data.obj          // what about objects?       
oObj["key"]          = "value";          // modify the variable and
data.obj["key"]     == oObj["key"]       // it returns true, too!

所以，资源..

What's the best way to store multiple values for jQuery's $.data()? https://stackoverflow.com/a/5759883/1257652