将 JSON 数组值作为 JQuery 选择器传递答案

【问题标题】：Passing JSON array values as JQuery selectors将 JSON 数组值作为 JQuery 选择器传递
【发布时间】：2010-07-23 22:12:42
【问题描述】：

我正在尝试将 JSON 数组值传递到我的 javascript 文件中，并使用这些值作为选择器来调用相应 html div 上的方法。

例如：

function clickEvents(items) {
for (var r = 0; r < items.length; r++) {    
    var omega = items[r].id +;

     $(omega).click(function() {
        alert('Thanks for adding item number #' + omega ' to your cart!');
    });
}

我的 JSON 如下所示：

 {
"Items" : [{
        "header: "apple",
        "id": 5000
      }, {
         "header": "banana",
         "id":5001
      }, {
         "header": "pear",
         "id": 5002
      }]
 }

不幸的是，它无法正常工作。我似乎无法让选择器匹配。有谁知道这种方法的正确语法或对其他方法有想法？

当我这样做时，它会起作用：

function clickEvents(items) {
   $('#5001').click(function() {
      alert('hi');
   });
 }

【问题讨论】：

标签： jquery arrays json

【解决方案1】：

两件事。

首先，您不能以数字开头的 ID。 http://www.w3.org/TR/html4/types.html#type-id

其次，如果您使用 ID 属性进行选择，则需要在选择器中连接 #。

这是一个例子： http://jsfiddle.net/3BBtU/

function clickEvents(items) {
    for (var r = 0; r < items.length; r++) { 

          // removed the stray "+" at the end
        var omega = items[r].id;

            // If you wanted to add an attribute to each element, do it here.
        $('#' + omega).attr('someAttribute', 'some value');

            // Wrap handler assignment in a closure, passing "omega" in so that
            //      when it fires, it is referencing the correct value of "omega"
        (function(o) {
                 // concatenate "#" to the ID for a proper ID selector
             $('#' + o).click(function() {

                  // You were missing the second + operator in this concatenation
                alert('Thanks for adding item number #' + o + ' to your cart!');
             });
        })(omega);
    }
}

    // Modify IDs so that they do not start with a number
var obj = {
    "Items" : [{
            "header": "apple",
            "id": "d5000"
          }, {
             "header": "banana",
             "id": "d5001"
          }, {
             "header": "pear",
             "id": "d5002"
          }]
     };

    // call the clickEvents() passing in the Items from the obj variable
clickEvents(obj.Items);

编辑：

添加示例
更正了我使用 functions 而不是 var 的错误。
更正了另一个问题。我将处理程序分配包装在一个闭包中，因为omega 变量在.alert() 的连接中的处理程序内部使用，这意味着当单击触发它时，它引用了omega 的最新值更新。李>

【讨论】：

所以 id 需要是字符串类型的？现在它们是整数
关于第一件事的一个问题：以数字开头的ID有效；它不是标准的吗？
@fordays, @s.susini - 无论是字符串还是整数，以数字开头的 ID 都是无效的 HTML。它们必须以字母开头。它可能适用于某些浏览器，但可能不适用于其他浏览器。
如何创建自己的内部属性标签，例如：“pid”：“k5001”作为数组的元素。将pid号分配给html标签后，如何在jquery选择器中引用“pid”？
@fordays - 为什么？如果要以“k”开头，则它对 ID 有效。您可以使用您的方法，但使用实际有效的 ID 属性进行查找会更快。快很多。请注意，我说的是 HTML 元素的 ID。必须以字母开头。

【解决方案2】：

到底出了什么问题？您在示例中的最后一个“id”之后缺少引号，但也许这只是一个错字......（？）

【讨论】：

我修正了错字，但是，当我调用 $(omega) 时，我需要帮助使选择器语法正确。单击我是否需要更改 omega 的分配或选择器语法？

【解决方案3】：

您必须使用类似：$("#"+omega)。你是在问身份证，不是吗！？

function clickEvents(items) {
for (var r = 0; r < items.length; r++) {    
    var omega = items[r].id;

     $("#"+omega).click(function() {
        alert('Thanks for adding item number #' + omega ' to your cart!');
    });
}

实际上，在这种情况下，$() 函数认为一个字符串是一个有效的 CSS 选择器。

【讨论】：