Question

编辑2 ：

实际上，我想做的是将img属性传递到服务器端，因为google app脚本是服务器端的javascript。并将数据传递到服务器只能是字符串。我发现的解决方案是添加一个通常的img属性，该对象的值包含一个对象，该对象包含我想要的所有内容（id，src，...，我的img。我通过JSON.stringified这个值和BOOM ...现在我得到了我需要的每个数据。 br /> 谢谢您的帮助，对于您的误解表示歉意。

编辑：

通过此线程

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。

如何将“ this”设置为onclick事件中的子元素

2 个答案: