他の機能の中のonClick機能

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を設定しています。

あなたの構造から第二に、

削除 '\'、これは終了行の文字です。

これはあなたが...

$.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を使用して探している、あなたはmyFunctionを定義している関数のスコープ内からターゲット要素にjQuery event listenerを設定すべきかであるかもしれません。 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>