javascript - 单击网格中的任何图像时如何运行函数？

Question

因此，我在“产品网格”中有称为产品的图像 block 。

每个组都有不同的值，虽然它们现在是静态输入的，但我想将来它们都会通过某种适配器添加。在这种情况下，只定义了类，没有定义 ID。

我如何做到这一点，以便在单击图像时，无论它在网格上的任何位置，我都能够检索:

1. 产品名称 (product_title)
2. 产品价格 (product_price)
3. 图片来源(images/product7.jpg)；并将其发送到下一页？

一方面，我知道如果设置了id，就可以得到like值内的属性。当数据不在像下面这样的单个标签/元素中时，javascript 是如何编写的？此外，假设我没有定义 id，我如何仅从与单击的图像关联的元素“组”中获取数据？每个“ block ”基本上都有相同的类。

在这种情况下是否不可避免地要为每个副本定义一个 ID？

---

这是一个 block 的样子，复制了几次:

        <!-- Product -->
        <div class="product">
            <div class="product_image" value="Yellow"><img  src="images/product_7.jpg" alt=""></div>
            <div class="product_extra product_new"><a href="categories.html">New</a></div>
            <div class="product_content">
                <div class="product_title"><a href="product.html">Yellow Phone</a></div>
                <div class="product_price">$670</div>
            </div>
        </div>

都在一个

里面

            <div class="row">
                <div class="col">

                    <div class="product_grid">

每个副本都定义了相同的类，只是 innerhtml 值不同，比如价格。然后将这些值发送到另一个页面以执行操作。

Answer 1

使用 jquery，你可以做这样的事情:

var $productImages = $('.product_image > img');
$productImages.click(function(){
     var $this =  $(this);
     var $product = $this.parents('.product');

     var title = $product.find('.product_title > a').text();
     var price = $product.find('.product_price').text();
     var imgSource = $this.attr('src')

     // all values are here, now you can do whatever you want with them

    alert(`Title is ${title}, price is ${price} and image source is ${imgSource}`);

})