0

我在购物网站上有一个产品浏览页面，其中显示产品图片列表。

一些产品有颜色选项，这些颜色选项的图像可以通过单击相关的颜色框来显示。然后将主要产品图像交换为相关的彩色产品图像。

我正在使用下面的 jquery 代码来交换产品图像，并传递一个悬停图像 url，它在悬停图像时显示（使用一些不同的代码完成）

// change browse image on child colour box click
jQuery(function() {
    jQuery('div[child-image]').click(function(event) {
        jQuery('img[id~=product-browse-image-'+event.target.id+']')
            .attr('src', jQuery(this).attr('child-image'))
            .attr('hover-image', jQuery(this).attr('child-hover-image'))
    }).each(function() {
        jQuery('<img />').attr('src', jQuery(this).attr('child-image'));
    });;
});

客户还可以按颜色过滤商店中的产品。

完成此操作后&colour=RED1，例如添加到 url

我想使用此变量并根据值“RED1”或页面加载时显示的任何值切换图像，因此人们过滤红色项目，产品具有红色选项，显示红色图像。刚刚以红色出售的产品已经以红色显示其唯一的图像。

在这种情况下，包含相关图像的彩色框，我希望替换看起来像这样：

<div id="1" class="child-colour RED1" child-image="/images/BC_00000475_190x253.jpg" child-hover-image="/BC_00000474_190x253.jpg"></div>

我可以从 url 中获取变量值，为了便于解释，它是“值”

所以我想我需要在某些时候使用它：

div[class^="child-colour '+value+'"]

但除此之外，我不知道如何使用上面的代码来实现我所解释的。

4

1 回答 1

0

具有两个子产品选项（红色和蓝色）的产品的 html 代码显示在这篇文章的底部。

我想使用 url &colour=RED1 (/index.php?option=com_virtuemart&view=category&virtuemart_category_id=2&Itemid=112&cupboard_knobs_colour=multi) 中的“RED1”值来强制交换主要产品图像与此 div 中的值

<div id="1" class="child-colour RED1" child-image="/images/stories/virtuemart/product/resized/BC_00000475_190x253.jpg" child-hover-image="/images/stories/virtuemart/product/resized/BC_00000474_190x253.jpg"></div>

我认为它只需要在我的第一篇文章中操作 jquery 即可在准备好的文档上运行并使用 url 中的颜色变量。

-- 下面是html代码 --

<div class="product floatleft">
    <div class="spacer">
      <div class="center">
      <div class="product-browse-image">

      <a title="/index.php?option=com_virtuemart&amp;view=productdetails&amp;virtuemart_product_id=1&amp;virtuemart_category_id=2&amp;Itemid=112" href="/index.php?option=com_virtuemart&amp;view=productdetails&amp;virtuemart_product_id=1&amp;virtuemart_category_id=2&amp;Itemid=112">


        <img width="100%" id="product-browse-image-1" src="/images/stories/virtuemart/product/resized/BC_00000475_190x253.jpg" hover-image="/images/stories/virtuemart/product/resized/BC_00000474_190x253.jpg" tmp="/images/stories/virtuemart/product/resized/BC_00000474_190x253.jpg">        </a>
        </div>
        <!-- The "Average Customer Rating" Part -->
                      </div>
      <div>
                <a href="/index.php?option=com_virtuemart&amp;view=productdetails&amp;virtuemart_product_id=1&amp;virtuemart_category_id=2&amp;Itemid=112">Ashed Fleurs-De test</a>    



        <div class="product-price marginbottom12" id="productPrice1">
          <div class="PricesalesPrice" style="display : block;"><span class="PricesalesPrice">£28.80</span></div>        </div>
        <a class="quick-view cboxElement" href="/index.php?tmpl=modal&amp;option=com_virtuemart&amp;view=productdetails&amp;virtuemart_product_id=1&amp;virtuemart_category_id=2&amp;Itemid=112&amp;productlayout=quickview" rel="/index.php?tmpl=modal&amp;option=com_virtuemart&amp;view=productdetails&amp;virtuemart_product_id=1&amp;virtuemart_category_id=2&amp;Itemid=112&amp;productlayout=quickview">QV</a>
        <p>
          <a href="/index.php?option=com_virtuemart&amp;view=productdetails&amp;virtuemart_product_id=1&amp;virtuemart_category_id=2&amp;Itemid=112" title="Ashed Fleurs-De test" class="product-details">Product details</a>                        


                                 <span class="product-field-display"></span></p><div id="1" class="child-colour BLU1" child-image="/images/stories/virtuemart/product/resized/BC_00000484_190x253.jpg" child-hover-image="/images/stories/virtuemart/product/resized/BC_00000485_190x253.jpg"></div><div id="1" class="child-colour RED1" child-image="/images/stories/virtuemart/product/resized/BC_00000475_190x253.jpg" child-hover-image="/images/stories/virtuemart/product/resized/BC_00000474_190x253.jpg"></div>
                  <p></p>
      </div>
      <div class="clear"></div>
    </div>
    <!-- end of spacer -->
  </div>
于 2013-07-08T10:08:40.590 回答