Question

我是JS的新手，希望有人可以帮助我解决我正在尝试构建演示库时遇到的问题。我有一个名为feed.js的JSON文件，我将该JSON文件中的某些字段（即图像URL）调用到HTML表中，这样做没有问题。我接下来要做的是，当用户点击图像时，图像旁边的单元格会填充更多来自JSON文件的字段。这是我到目前为止，但myFunction在f之外被定义，所以当我点击图像时，我得到“Uncaught ReferenceError：f is not defined”。如何解决这个问题的任何想法都会很棒！很抱歉，如果这是一个真正的新手问题，但正如我所说我是新手！

<script>
$(function() {

    var feed = [];

    $.getJSON('feed.json', function(data) {
        $.each(data.phones, function(i, f) {
            var tblRow = "<tr>" + "<td><div id=\"demo1\"><img onclick=\"myFunction()\" id=\"demo\" src=" + f.image + "></div></td></tr>";
            $(tblRow).appendTo("#userdata tbody");

        });
    });

});

function myFunction() {
  document.getElementById("demo1").innerHTML = "<tr>" + "<td><div id=\"demo1\"><img onclick=\"myFunction()\" id=\"demo\" src=" + f.image + "></div></td><td>"+ f.description + "</td><td>" + f.manufacturer + "</td></tr>;"
};
</script>

Answer 1

在这一行

 var tblRow = "<tr>" + "<td><div id=\"demo1\"><img onclick=\"myFunction()\" id=\"demo\" src=" + f.image + "></div></td></tr>";

您要将每行的常用ID设置到表中，请更改此内容。

其次，

删除＆＃39; \＆＃39;从你的结构来看，这是endLine角色。

这可能就是你要找的......

 $.getJSON('feed.json', function(data) {
    $.each(data.phones, function(i, f) {
        var tblRow = "<tr>" + "<td><div><img onclick='myFunction()' src=" + f.image + "></div></td></tr>";
        $(tblRow).appendTo("#userdata tbody");

    });
});

Answer 2

您应该在您定义onclick的函数范围内的目标元素上设置jQuery event listener，而不是使用myFunction。由于您img有一个id，因此您可以通过这种方式定位它。像这样：

<script>
$(function() {

    var feed = [];

    function myFunction() {
      document.getElementById("demo1").innerHTML = "<tr>" + "<td><div id=\"demo1\"><img id=\"demo\" src=" + f.image + "></div></td><td>"+ f.description + "</td><td>" + f.manufacturer + "</td></tr>";
    }

    $.getJSON('feed.json', function(data) {
        $.each(data.phones, function(i, f) {
            var tblRow = "<tr>" + "<td><div id=\"demo1\"><img id=\"demo\" src=" + f.image + "></div></td></tr>";
            $(tblRow).appendTo("#userdata tbody");

        });
    });

    $(document).on('click', '#demo', myFunction); // everytime the user clicks on an element with id #demo inside the document, myFunction will be called

});

</script>

另一个函数中的onClick函数

2 个答案: