Javascript 将json附加到DOM元素数组中的数据属性中

我正在制作一个包含菜谱的网站，并通过Mustache.js模板从json文件加载菜谱。 我的json如下所示：

{
"recipes":[
{"name": "A", preparationTime: "40min", "servings": "3", "image": "path/to/imageA"},
{"name": "B", preparationTime: "30min", "servings": "2", "image": "path/to/imageB"},
{"name": "C", preparationTime: "20min", "servings": "3", "image": "path/to/imageC"},
{"name": "D", preparationTime: "30min", "servings": "4", "image": "path/to/imageD"}
]
}

var recipeTemplate = "" +
"<div class='col-6 recipeUnit'>" +
"<div class='recipeItem row'>" + 
"<div class='recipeItem__image col-5'><img src='{{image}}' alt='recipe image'></div>" +
"<div class='recipeItem__description col-7'>" + 
"<h3 class='recipeTitle'>{{name}}</h3>" + 
"<div class='details'>" +
"<span>{{preparationTime}}</span>" +
"<span>{{servings}}</span>" +
"</div>" +
"<a class='buttonDetails' href='#'>see more</a>" +
"</div>" +
"</div>" +
"</div>";

$(document).ready(function(){

    loadRecipes()
    function loadRecipes(){

        $.ajax({

            type: "GET",
            url: "recipes.json", 
            dataType: "JSON",
            cache: false,
            success: function(data){
            $section.empty();
            for(var i = 0; i < data.recipes.length; i++){

                var recipe = data.recipes[i];
                var html = Mustache.to_html(recipeTemplate, recipe);
                $section.append(html);
                $button = $(".buttonDetails");
                $button.data.recipe = recipe;

            };

            $button.on("click", function(){

                console.log($(this).data.recipe)
                return false;


            }); 

        });

    }

})

我的模板如下所示：

{
"recipes":[
{"name": "A", preparationTime: "40min", "servings": "3", "image": "path/to/imageA"},
{"name": "B", preparationTime: "30min", "servings": "2", "image": "path/to/imageB"},
{"name": "C", preparationTime: "20min", "servings": "3", "image": "path/to/imageC"},
{"name": "D", preparationTime: "30min", "servings": "4", "image": "path/to/imageD"}
]
}

var recipeTemplate = "" +
"<div class='col-6 recipeUnit'>" +
"<div class='recipeItem row'>" + 
"<div class='recipeItem__image col-5'><img src='{{image}}' alt='recipe image'></div>" +
"<div class='recipeItem__description col-7'>" + 
"<h3 class='recipeTitle'>{{name}}</h3>" + 
"<div class='details'>" +
"<span>{{preparationTime}}</span>" +
"<span>{{servings}}</span>" +
"</div>" +
"<a class='buttonDetails' href='#'>see more</a>" +
"</div>" +
"</div>" +
"</div>";

$(document).ready(function(){

    loadRecipes()
    function loadRecipes(){

        $.ajax({

            type: "GET",
            url: "recipes.json", 
            dataType: "JSON",
            cache: false,
            success: function(data){
            $section.empty();
            for(var i = 0; i < data.recipes.length; i++){

                var recipe = data.recipes[i];
                var html = Mustache.to_html(recipeTemplate, recipe);
                $section.append(html);
                $button = $(".buttonDetails");
                $button.data.recipe = recipe;

            };

            $button.on("click", function(){

                console.log($(this).data.recipe)
                return false;


            }); 

        });

    }

})

var recipeTemplate=“”+
"" +
"" + 
"" +
"" + 
“{{name}}”+
"" +
“{{preparationTime}}”+
“{{servings}}”+
"" +
"" +
"" +
"" +
"";

我的ajax加载函数如下所示：

{
"recipes":[
{"name": "A", preparationTime: "40min", "servings": "3", "image": "path/to/imageA"},
{"name": "B", preparationTime: "30min", "servings": "2", "image": "path/to/imageB"},
{"name": "C", preparationTime: "20min", "servings": "3", "image": "path/to/imageC"},
{"name": "D", preparationTime: "30min", "servings": "4", "image": "path/to/imageD"}
]
}

var recipeTemplate = "" +
"<div class='col-6 recipeUnit'>" +
"<div class='recipeItem row'>" + 
"<div class='recipeItem__image col-5'><img src='{{image}}' alt='recipe image'></div>" +
"<div class='recipeItem__description col-7'>" + 
"<h3 class='recipeTitle'>{{name}}</h3>" + 
"<div class='details'>" +
"<span>{{preparationTime}}</span>" +
"<span>{{servings}}</span>" +
"</div>" +
"<a class='buttonDetails' href='#'>see more</a>" +
"</div>" +
"</div>" +
"</div>";

$(document).ready(function(){

    loadRecipes()
    function loadRecipes(){

        $.ajax({

            type: "GET",
            url: "recipes.json", 
            dataType: "JSON",
            cache: false,
            success: function(data){
            $section.empty();
            for(var i = 0; i < data.recipes.length; i++){

                var recipe = data.recipes[i];
                var html = Mustache.to_html(recipeTemplate, recipe);
                $section.append(html);
                $button = $(".buttonDetails");
                $button.data.recipe = recipe;

            };

            $button.on("click", function(){

                console.log($(this).data.recipe)
                return false;


            }); 

        });

    }

})

$（文档）.ready（函数（）{
loadRecipes（）
函数loadRecipes（）{
$.ajax({
键入：“获取”，
url:“recipes.json”，
数据类型：“JSON”，
cache:false，
成功：功能（数据）{
$section.empty（）；
对于（var i=0；i

我希望能够将每个特定配方的json存储到页面上显示的每个配方中的$button中。一切正常，但当我想要console.log data.recipe属性时，当我单击按钮时，我总是从json中获取最后一个数组项。我已经为此挣扎了很长一段时间，我不明白为什么我会这样做t正在显示最后一项。 最初我是从telez这里得到这个想法的： .

---

如果有人能向我解释为什么会发生此问题，以及我如何解决它，我将不胜感激。

因为

$button=$（“.buttonDetails”）

匹配文档中附加到该点的所有按钮。因此，基本上您迭代所有配方，并将每个配方的“最后收据”数据设置为“所有”按钮。这会将所有按钮数据设置为“最后配方”。

问题在于：

$button = $(".buttonDetails");

您将获得所有按钮，并立即为所有按钮分配一个配方。

---

为了避免这种情况，您应该更改选择器，使其仅在当前模板中搜索。

这里有几个问题

您对

$button

的引用将在每次迭代中重新分配，因此当您单击$button时，它将指向最后一个绑定的按钮

由于您的$按钮正在重新分配，因此与它关联的数据也将重新分配

$（文档）.ready（函数（）{
变量$section=$（'section'）；
loadRecipes（）；
函数loadRecipes（）{
var解决方案=[]；
对于（var i=0；i

谢谢Voskhod。您能告诉我如何获取当前按钮吗？我尝试过使用$button=$（“.buttonDetails”）.eq（I），但结果仍然相同-我从json数组控制台记录了最后一项。请尝试此选择器：$button=$（html）。find（“.buttonDetails”）；仍然引用最后一项，不幸的是：-（Simon非常感谢您的帮助和帮助。这个解决方案真的很有效：-）。我想每次都应该将$button保存到一个数组中…但没想到您可以在映射函数中创建一个事件处理程序。我需要更多地阅读。我只是想知道$button=$(“.recipeUnit:last.buttonDetails”）。为什么是这个而不是$button=$（“.buttonDetails”）.eq（i）。它似乎有效。

$（“.buttonDetails”）.eq（i）

也很好。希望你能把它整理好。