在 JS 中獲取被點擊元素的 ID

Question

我正在嘗試建立一個網站，但遇到了一個問題，我有這個帶有不同產品的 Bootstrap Carousel，當它們被點擊時，它們應該重定向到具有該特定產品的頁面，所以我正在嘗試制作它，但因為每個輪播項目都有不同東西有點難以編寫和更改鏈接。 所以我想用這個問題上網，但沒有找到任何答案，如果有人知道答案，請考慮幫助我....

Answer 1

在處理程序中，使用：

event.target.id

or

this.id

例子：

<img id="product1" src="product1.png" onclick="toProductPage(event)"/>
<script>
   function toProductPage(event){
      location="product.php?id="+event.target.id;
   }
</script>

或以更短的形式：

    <img id="product1" src="product1.png" onclick="location='product.php?id='+this.id"/>

請注意，“事件”可以是全局變量。

Answer 2

因此，為了跟蹤咳嗽的項目，您必須添加所謂的“事件偵聽器”，將其想象為要求某人等待並“偵聽”特定事情的發生，當它發生時，然后做一些事情

這就是我們需要設置的，一個等待特定按鈕/按鈕被“點擊”的事件“監聽器”，當它們被點擊時，做一些事情

為此，您需要在 JavaScript 中引用您的 HTML 按鈕，一種方法是為元素提供一個 ID，然后該 ID 可以作為 JavaScript 中的全局變量直接訪問，這讓您和這個“事件偵聽器”到特定按鈕，等待它被點擊

然后當它被點擊時，我們可以得到我們想要的按鈕的所有信息，或者做任何 JavaScript 可以做的動作

所以

<Button id="hi"></button>
<Script>
hi.addEventListener("click", function (event) {
    console.log("clicked this button!!! ", event)
})
</Script>

然后檢查控制台以獲取有關該事件的更多信息。 顯然，如果您遍歷數組並將其添加到每個按鈕中，您也可以從具有相同類的按鈕數組中添加這些事件偵聽器，只需調用 . addEventListener 到每個按鈕對象，你就可以開始了，所有的信息和屬性都可以從事件對象中訪問，無論是 event.target、event.srcElement 等，只需查看所有屬性的控制台