如何在onclick事件中將“ this”設置為子元素

Question

編輯2 ：

實際上，我想做的就是將img屬性傳遞到服務器端，因為google app腳本是服務器端的javascript。 並將數據傳遞到服務器只能是字符串。 我發現的解決方案是添加一個通常的img屬性，該對象的值包含一個對象，該對象包含我想要的所有內容（img的id，src等）。我通過JSON.stringified這個值和BOOM ...現在獲取所需的所有數據。
感謝您的幫助，對於誤解，我們深表歉意。

編輯 ：

多虧了這個線程

https://stackoverflow.com/a/9726264/1859295

我終於可以找到解決我問題的方法。

我在ul列表上使用了.on（）方法，現在“ this”指向我的img元素。

原始帖子：

我有一個空的ul。 我用js附加li。 li包含具有src，id，名稱屬性和onclick事件的img，后者會觸發以“ this”為參數的函數。 我需要我的“ this”成為li中的img元素。 相反，我的ul為“ this”

我的代碼是：

function createItemsList(items){ 
    $("#items").empty();

    for (var i = 0; i < items.length; i++) {
      $("#items").append('<li class="w3-display-container" 
     id="test"><img src="'+ items[i].url + '" id ="'+ items[i].id + 
     '" style="height:25px;" 
     onclick="google.script.run.addItem(this)"; return false; 
     class="w3-ripple"></li>');
          }
        };


        google.script.run
              .withSuccessHandler(createItemsList)
              .getItemsList();

Answer 1

有使用jQuery創建元素的更好方法：

for (var i = 0; i < items.length; i++) {
  let img = $("<img/>", {
    src: items[i].url,
    id: items[i].id,
    css: { height: "25px" },
    click: function() { google.script.run.addItem(this); },
    "class": "w3-ripple"
  });
  let li = $("<li/>", {
     "class": "w3-display-container"
     html: img
  });
  $("#items").append(li);
}

$("<tagname/>")工具接受帶有新元素屬性的第二個參數。 您可以在其中包含處理程序函數。 這比嘗試通過字符串混合拼湊在一起的HTML中的引號字符要整潔得多。

Answer 2

我將內部更改如下

 var img = $('<img />').attr('src', items[i].url).attr('id', items[i].id);
    img.click(function() {
        google.script.run.addItem(this)
    })
    $("#items").append('<li class="w3-display-container" id="test">').append(img);

基本上使用jquery中的click事件處理程序，所以我認為這將是img。