Question

因此，我有一个名为product的图像块，它们位于“产品网格”中。

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

我如何做到这一点，以便在单击图像时，无论其在网格上的什么位置，我都可以检索到：

产品名称（product_title）
产品价格（product_price）
图片来源（images / product7.jpg）;并将其发送到下一页？

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

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

这是一个块的样子，复制了几次：

        <!-- 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">

每个副本都定义了相同的类，仅在内部HTML值（如价格）上有所不同。然后将这些值发送到另一页中进行处理。

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

})

Answer 2

我用我能理解的东西（使用jquery）弄了个小提琴： https://jsfiddle.net/nv4ezjgc/

实际上，这是非常基本的。 jQuery部分看起来像这样

$('.product_grid').on('click', 'img', function(){
    var url = 'your-site.html';
    var el = $(this).parents('.product');
    var params = {
        title: el.find('.product_title').text(),
        price: el.find('.product_price').text(),
        img_src: el.find('.product_image img').attr('src')
    };
    window.location.href = url+'?title='+params['title']+'&price='+params['price']+'&img_src='+params['img_src'];
});

我不知道您想如何将参数传递给新站点。 通过url（或通常是js）传递商店系统的价格等信息是不安全的。相反，您应该传递一个ID来从服务器获取数据。

每当单击网格中的任何图像时，如何运行函数？

2 个答案: