Question

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

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

我正在使用下面的jquery代码进行产品图片的交换，并传递悬停图片的网址，该图片会在悬停图片时显示（使用不同的代码完成）

// 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会添加到网址

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

在这种情况下，带有相关图像的彩色框，我希望被替换的外观如下：

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

我可以从网址中获取变量值，为了解释这是'价值'

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

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

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

Answer 1

此帖子底部显示了带有两个子产品选项（红色和蓝色）的产品的html代码。

我想在url＆amp; color = 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>

在页面加载上应用图像更改而不是单击

1 个答案: