将不同功能附加到动态创建的卡上

时间:2017-11-02 11:44:52

标签: javascript jquery json loops

我有一个卡片列表是通过循环存储在Firebase上的一些JSON数据创建的。每张卡分为两部分:“overviewCardInfo”和“overviewCardOptions”。

我想这样做,以便在单击选项部分时,调用一个函数(在本例中为.toggleClass()),并且当单击信息部分时,该卡的标题将显示在其他位置。

到目前为止,我一直无法实现这两种效果:卡片的标题无处可见,而toggleClass()或者使用类“.overviewCardOptions”影响div,或者影响所有卡片,而不仅仅是单击的卡片。

这就是我从Firebase获取的JSON数组生成卡片的样子:

[{"name":"Push Ups", "duration":3, "break":3},{"name":"Squats", "duration":3, "break":3},{"name":"Running in Place", "duration":3, "break":3}]

JavaScript(一些jQuery):

  // Compile Routine Overview List.
  var obj = JSON.parse(localStorage.exercise); // The JSON shown above
  obj.forEach(function(exercise)
  {
    $("#overviewList").append("<li><div class='overviewCard'><div class='overviewCardInfo'>\n\
    <h3>" + exercise.name + "</h3><p>" + exercise.duration + " sec.</p><p id='right'>Break: " + exercise.break + " sec.</p>\n\
    </div><div class='overviewCardOptions'><img src='images/thrash.png' width='23' alt='' /></div></div></li>");
  });

$(document).on("click", ".overviewCardInfo", function() // Attach event handler to document, as cards are generated after other elements on page.
  {
    $("#overviewSpecifier").css("display", "block"); // Works fine.
    $("#infoP").text($(this).text()); // Shows all text contained in card, of course, how do I target the h3 tag specifically? jQuery API docs not helping me understand atm.
  });

  $(document).on("click", ".overviewCardOptions", function()
  {
    $(".overviewCard", this).toggleClass("toDelete"); // Fails.
  });

HTML:

<ul id="overviewList"></ul>

<div id="overviewSpecifier">
  <p id="infoP"></p>
</div>

1 个答案:

答案 0 :(得分:1)

click()事件附加到document,而不是将其设为全局。

$(document).on("click", ".overviewCardOptions", handleThrashClick);

此外,您的对象(实际上它是一个数组)不应该有引号

var obj = "[ ... ]"应为var obj = [ ... ]

请参阅此处的演示&gt;&gt; https://fiddle.jshell.net/9a457qzv/3/