Javascript: jQuery : 用 Json 的数字前缀声明动态变量

Question

我有一个带有 jquery 的 json 文件

我想这样做：

var $item1 = $('<div class="gallery-item item1">');
var $item2 = $('<div class="gallery-item item2">');
....
var $items = $item1.add($item2).add($item3)....;

我尝试这样做，但我无法创建动态变量

   if(response){
       var items = [];
       $.each( response, function( key, val ) {
        // console.log('id :',key);
        // console.log('val :',val);
          var $item+key= $(val);
       });
       // var $items = $item1.add($item2).add($item3)....;
      }

Answer 1

$.add() 所做的只是将选定的元素添加到选择中。您的意图可能有所不同，但我从您的帖子中了解到您想要选择根据可用 JSON 创建的所有新 div。

为此，您可以这样做：

var response = {
  "$item1": '<div class="gallery-item item1">',
  "$item2": '<div class="gallery-item item2">',
  "$item3": '<div class="gallery-item item3">'
};
if (response) {
  var $items;
  $.each(response, function(key, val) {
    eval(key + "=$('" + val + "')");
    var e = eval(key);
    $items = ($items== null)?e:$items.add(e);
  
    /* for visual output */
    e.html(key);
    $("body").append(e);
    /* for visual output */
  });
}

.gallery-item {
  width: 100px;
  height: 100px;
  float: left;
  margin-right: 5px;
  padding: 20px;
}
.item1 {
  background: red;
}
.item2 {
  background: green;
}
.item3 {
  background: blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

另外请记住，您应该尽可能避免使用 eval()。问问自己你是否真的需要做这些事情？可以通过简单地选择来实现：

var $items = $(".gallery-item");