Question

我正在从API接收JSON数据并创建jQuery元素并将它们附加到列表中。

我怎样才能这样做，当我点击其中一个创建的HTML元素时，我可以将该元素的原始JSON数据记录到控制台？

cards.forEach(function (card) {
    var $newCard = $("<li>" + card.name + "</li>");
    $newCard.click(function () {
        // gives me the HTML, but I don't see the properties of the
        // object it was created from.
        console.log(this);
    });
    cardsContainer.append($newCard);
});

我猜我可以在字符串HTML中添加onclick函数吗？有没有办法从JavaScript中做到这一点？

Answer 1

我猜你看起来像这样：

var cardsContainer = $('#container'),
  cards = [{
    name: "One"
  }, {
    name: "Two"
  }, {
    name: "Three",
    test: "asd"
  }]
cards.forEach(function(card) {
  var $newCard = $("<li>" + card.name + "</li>").data('extra', card).on('click', function(e) {
    console.log($(this).data('extra'));
  });

  cardsContainer.append($newCard);
});

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

Answer 2

只需访问卡片，因为它位于功能关闭内..

cards.forEach(function (card) {
  var $newCard = $("<li>" + card.name + "</li>");
  $newCard.click(function () {
      console.log(this); //will be the LI
      console.log(card); //this will be the card
  });
  cardsContainer.append($newCard);
});

Answer 3

您可以使用jQuery＆＃39; .data()将整个对象存储在新的$newCard变量中。

例如：

var $newCard = $("<li>" + card.name + "</li>");
$newCard.data("myOriginalObject", card);
$newCard.click(function () {
    // Should now print the original object correctly
    console.log($(this).data("myOriginalObject"));
});

创建jQuery元素后访问JSON数据

3 个答案: