javascript - Onclick 选择特定的 JSON 数据集

Question

我有一个 JSON 对象，如下所示:

{
  "workouts":
  [
    {
      "title": "Full Body",
      "exercises":
      [
        {
          "name": "Push Ups",
          "duration": 3,
          "break": 3
        },
        {
          "name": "Squats",
          "duration": 3,
          "break": 3
        },
        {
          "name": "Running in Place",
          "duration": 3,
          "break": 3
        }
      ]
    },
    {
      "title": "God Legs",
      "exercises":
      [
        {
          "name": "Running in Place (High Knees)",
          "duration": 3,
          "break": 3
        },
        {
          "name": "Squats",
          "duration": 3,
          "break": 3
        },
        {
          "name": "Clams",
          "duration": 3,
          "break": 3
        }
      ]
    },
    {
      "title": "Morning Stretch",
      "exercises":
      [
        {
          "name": "Downward Dog",
          "duration": 3,
          "break": 3
        },
        {
          "name": "Face Plant",
          "duration": 3,
          "break": 3
        },
        {
          "name": "Warrior",
          "duration": 3,
          "break": 3
        }
      ]
    }
  ]
}

我正在循环访问这些数据以动态创建卡片列表。我想这样做，以便当点击/单击卡片时，显示/访问与该特定数据集相关的信息。

示例如果我点击标题为“全身”的卡片，我希望显示一个仅包含“全身”练习数组中的练习的列表，该列表应该是: Push起立，3, 3 - 深蹲，3, 3 - 原地运行 3, 3。

我正在使用 Firebase 在实时数据库上托管我的数据。

HTML:

<!--LIST THAT THE DYNAMICALLY GENERATED CARDS ARE APPENDED TO-->
<ul id="cardList" class="cards"></ul>

<!--MARKUP FOR THE CARDS, USED IN THE JSON FOR LOOP-->
<li>
  <div class='card' onclick='selectWorkout(this)'>
    <a class='startIt' href='timer.html'>
      <div class='cardInfo'>
         <h3>Full Body</h3>
         <p>10 min.</p>
       </div>
    </a>
    <a class='cardOptions' href='overview.html'>
      <p>Options</p>
    </a>
  </div>
</li>

JavaScript:

// Initialize Firebase.
firebase.initializeApp(config);
// Reference data.
var dbRef = firebase.database().ref().child("workouts");
// Sync with Firebase in real time.
dbRef.on("value", snap =>
{
  var workouts = snap.val();

  for (var i = 0;  i < workouts.length; i++) // WORKS GREAT.
  {
    //display.innerHTML = exercises[0].name;
    //$("#cardList").append(exercises[i].title);
    var routine = workouts[i].title;

    $("#cardList").append("<li><div class='card'><a class='startIt' href='#' onclick='selectWorkout(this)'>\n\
    <div class='cardInfo'><h3>" + routine + "</h3><p>10 min.</p>\n\
    </div></a><a class='cardOptions' href='overview.html'>\n\
    <div id='options'><p>Options</p></div></a></div></li>"); // ALL GOOD.
  }

  function selectWorkout(this) // NOT ONLY DOES NOT ACHIEVE DESIRED GOAL, BREAKS ENTIRE FUNCTION.
  {
    var selected = workouts[this].exercises;
    $("#cardList").append(selected);
  }
});

我认为我像往常一样做了一些愚蠢的事情:锻炼方括号中似乎不允许使用“this”，但否则我如何获取一组特定的数据？

Answer 1

是的，你不能传入this作为参数名称 - 它是一个保留字。一般来说，我会尽量避免使用 this如果可以的话，用 javascript 编写 - 这真的很棘手。

更可靠的方法是将卡片 HTML 创建为单独的 jQuery 对象并添加特定的点击处理程序，如下所示:

var routine = workouts[i].title;

//create card element
var $card = ("<li><div class='card'><button class='startIt'><div class='cardInfo'><h3>" + routine + "</h3><p>10 min.</p></div></a><a class='cardOptions' href='overview.html'>   <div id='options'><p>Options</p></div></button></div></li>");

//add click handler
$card.find("button.startIt").on("click", function() {
    selectWorkout( workouts[i] );
});

//put card on the page
$("#cardList").append($card);

然后

函数选择锻炼(锻炼) { var selected =锻炼.exercises;

//not sure what you're trying to do here??
$("#cardList").append(selected);

}

您可能会注意到我更改了您的 <a href='#'>进入<button> - 一般来说，可访问性更好!