如何將事件偵聽器添加到模板字符串

Question

我創建了一個 class，我正在使用循環動態填充模板字符串中的語句，其中一個是圖片，我想在圖片上添加一個事件偵聽器點擊，以便通過點擊這張照片可以發生一些事情並且有多少可能？

我的 class：

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);

  }
}

Answer 1

正如提莫所說的旁注一樣，您的標題具有誤導性。

同樣在這里我找到了一個可能的解決方案，盡管它使用的是 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
}