创建一个选择功能，以选择预制页面上的图像并在单击它们时弹出警报

Question

有没有一种方法可以转到此页面：

http://www.canadiantire.ca/en/dyson.html

添加一个脚本，该脚本将仅选择磁贴上的产品图像，当我单击它们时，将创建一个可能带有其价格的警报，但是现在，我对一个随机短语感到满意。

我将假设我只需要将这些图像循环到数组中，并可能对刚刚标记的那些图像使用addeventlistener？ 有什么方法可以执行此操作而无需进入每个图像并为其添加ID。

Answer 1

首先获取所有产品元素，然后选择此选择器.product-tile-srp__content-wrapper然后，对于每个产品，附加一个click事件，然后从.product-tile__price获取价格

这是代码：

var products = document.querySelectorAll('.product-tile-srp__content-wrapper');

for (var i = 0; i < products.length; i++) {
  products[i].addEventListener('click', function(event) {
    var product = this;
    var price = product.querySelector('.product-tile__price').innerText;
    window.alert(price);
  });
}

请注意，for循环很重要，因为IE不支持NodeList.forEach 。

Answer 2

使用jQuery，这非常简单，只需根据类进行选择即可。 您还需要防止单击导致浏览器导航到产品页面。 然后，您可以通过在后代中搜索包含价格的元素来获取价格。 在我的示例中，由于我只是选择图像而不是整个产品元素，因此我首先必须搜索祖先（具有closest ）以获取基本产品元素，然后找到价格元素。

这是单击图像时激活的示例，只需在页面上将其输入到浏览器的控制台中即可：

$('.product-tile-srp__image').on('click', (e) => {
    // Prevent click from actually opening the product page
    e.stopPropagation();
    e.preventDefault();

    price = $(e.target).closest('.product-tile-srp__content-wrapper').find('.product-tile__price').text();
    alert(price);
});