如何将事件侦听器添加到模板字符串

莱文·多利兹

我创建了一个类，我在循环中动态填充了模板字符串中的语句，其中一个是图片，并且我想向该图片添加事件侦听器单击，以便通过单击该图片可以发生某些事情，并且有多少可能？

我的课：

class Statement {
constructor(title,image,description,price){
this.title=title;
this.image=image;
this.description=description;
    this.price=price;
    
}
}


const statement16 = new Statement('element',"https://smenterprise.ge/wp-content/uploads/2019/09/IMG-20190902-WA0035.jpg","ist a good condition",199);

const statementsArray=[statement1,statement2,statement3,statement4,statement5,statement6,statement7,statement8,statement9,statement10,statement11,statement12,statement13,statement14,statement15,statement16]


const appendStatement=(statement)=>{
    const statementTemplate=`
    <div class="statement">
    <p class="statementTitle"> ${statement.title}</p>
    <img class="statementImg" src=${statement.image} alt="">
    <p class="description">${statement.description}  </p>
    <p class="productPrice">${statement.price} ₾ </p>
  
    </div>
    `
 
    productList.innerHTML+`enter code here`=statementTemplate


}

const appendAllStatements=(statements)=>{
  for(const statement of statements){
appendStatement(statement);

  }
}

Jairo NavaMagaña

就像Teemo评论的旁注一样，您的头衔具有误导性。

同样在这里我找到了一个可能的解决方案，尽管它正在使用JQuery。

如果您不想使用JQuery，我会将事件附加到图片标签，甚至可以传递如下参数：

const appendStatement=(statement)=>{
    const statementTemplate=`
    <div class="statement">
    <p class="statementTitle"> ${statement.title}</p>
    <img class="statementImg" src=${statement.image} alt="" onclick="some_function(${statement.image})">
    <p class="description">${statement.description}  </p>
    <p class="productPrice">${statement.price} ₾ </p>
    </div>
    `
 
    productList.innerHTML+`enter code here`=statementTemplate
}

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。