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
        }
      ]
    }
  ]
}

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

示例如果我点击带有“Full Body”标题的卡片，我想要显示一个列表，其中只包含“Full Body”练习数组中的练习，该列表应为：Push Ups，3,3 - Squats，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);
  }
});

我认为我像往常一样做了一些愚蠢的事情：在锻炼方括号中似乎不允许“这个”，但我如何得到一组特定的数据呢？

Answer 1

是的，您无法传递this作为参数名称 - 它是一个保留字。一般情况下，如果可以的话，我会尽量避免在javascript中使用this - 这真的很棘手。

更有效的方法是将您的卡片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);

然后

功能selectWorkout（锻炼） { var selected = workout.exercises;

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

}

您可能会注意到我已将<a href='#'>更改为<button> - 通常更易于访问！

Onclick选择特定的JSON数据集

1 个答案: