Question

感谢您花时间阅读本文。非常感激。

对于我们的网站，我们有一个显示产品包装的滑块。滑块的工作原理如下：

您当前可以选择一种颜色，包装图像将更新并显示所选颜色。 .header-module-images中的图像src将使用来自.header-module-swatches的活动范围内的DATA-IMAGE属性进行更新。
此颜色名称也以相应的颜色显示在下方。来自i.product-code的范围将使用DATA-PRODUCTCODE属性进行更新，并从DATA-PRODUCTCOLOR属性中获取正确的颜色。

对于特定产品，我们有不同的颜色，但也有不同的尺寸/长度。目前，滑块有一个div，显示两种不同的尺寸和相应的价格。

代码：

<div class="header-module-images">
    <img alt="Packaging" src="/wp-content/uploads/abcd150ru-packaging.png">
</div>

<section class="header-module-swatches">
    <span class="" data-image="/wp-content/uploads/abcd150cl-packaging.png" data-index="0" data-productcode="Cloud" data-productcolor="#dbd9d4" style="background-color: #dbd9d4;"></span> 
    <span class="" data-image="/wp-content/uploads/abcd150bc-packaging.png" data-index="1" data-productcode="Buttercup" data-productcolor="#fbeeb4" style="background-color: #fbeeb4;"></span> 
    <span class="" data-image="/wp-content/uploads/abcd150pt-packaging.png" data-index="2" data-productcode="Peppermint" data-productcolor="#97e0d7" style="background-color: #97e0d7;"></span> 
    <span class="" data-image="/wp-content/uploads/abcd150cu-packaging.png" data-index="3" data-productcode="Cupcake" data-productcolor="#f8d6cf" style="background-color: #f8d6cf;"></span> 
    <span class="" data-image="/wp-content/uploads/abcd150ar-packaging.png" data-index="4" data-productcode="Army" data-productcolor="#69693f" style="background-color: #69693f;"></span> 
    <span class="" data-image="/wp-content/uploads/abcd150in-packaging.png" data-index="5" data-productcode="Indigo" data-productcolor="#065b85" style="background-color: #065b85;"></span> 
    <span class="active" data-image="/wp-content/uploads/abcd150ru-packaging.png" data-index="6" data-productcode="Ruby" data-productcolor="#872d39" style="background-color: #872d39;"></span>
    <span class="" data-image="/wp-content/uploads/abcd150cc-packaging.png" data-index="7" data-productcode="Concrete" data-productcolor="#4c4c4c" style="background-color: #4c4c4c;"></span> 
        <i class="product-code">
            <span style="color: #872d39;">Ruby</span>
        </i>
</section>

<div class="product-header-variations">
    <span class="active" data-index="0" data-productcode="1.5m" data-productprice="€ 14.99">1.5m</span> 
    <span class="" data-index="1" data-productcode="3m" data-productprice="€ 24.99">3m</span> 
        <i class="product-price">
            <span style="">€ 14.99</span>
        </i>
</div>

使用Javascript：

initVariationPackagingCarousel: function() {

        $('#product-packaging-container .product-header-variations').on('mouseenter', 'span[data-productprice]:not(.active)', function(){

            var that = $(this)

            // Change active price   
            that.siblings().removeClass('active');
            that.addClass('active');

            // Change active productcode   
            $('#product-packaging-container .product-header-variations .product-price > span').text(that.data('productprice'));    
        });
    },


initPackagingSwatchesCarousel: function() {

        var $img = $('#product-packaging-container .header-module-images img'),
                dsrc = $img.attr('src');
              $('#product-packaging-container .header-module-swatches span').hover(function() {
                var $this = $(this);
                setTimeout(function(){ $img.attr('src', $this.data('image'));}, 300);
              });

        $('#product-packaging-container .header-module-swatches').on('mouseenter', 'span[data-productcode]:not(.active)', function(){

            var that = $(this),
                carousel = $('#product-packaging-container .header-module-images');

            // Change active thumb   
            that.siblings().removeClass('active');
            that.addClass('active');

            // Change active productcode   
            $('#product-packaging-container .header-module-swatches .product-code > span').text(that.data('productcode'));
            $('#product-packaging-container .header-module-swatches .product-color > span').text(that.data('productcolor'));

            // Change colour text colour
            $('#product-packaging-container .header-module-swatches i.product-code span').css('color','' + that.data('productcolor') + '');
            $('#product-packaging-container .header-module-images img').addClass("fadeOut").delay(400).queue(function(next){
                  $(this).removeClass("fadeOut");
                  next();
              });
        });     
    },

目标：

我想这样做，以便在选择特定尺寸时，.header-module-swatches中的.header-module-images AND 数据图像属性中的价格图像src的一部分已更新，仅用300替换150. 所以：

 <img alt="Packaging" src="/wp-content/uploads/abcd150ru-packaging.png">

将来

 <img alt="Packaging" src="/wp-content/uploads/abcd300ru-packaging.png">

和

<span class="" data-image="/wp-content/uploads/abcd150cl-packaging.png">

将来

<span class="" data-image="/wp-content/uploads/abcd300cl-packaging.png">

谁能把我推向正确的方向？

最简单的方法是将.product-header-variations中的数据产品代码更新为＆＃34; 150＆＃34; /＆＃34; 300＆＃34;当.product-header-variation跨度有效时，＃product-packaging-container＆＃34; 150＆＃34;被活动数据产品代码＆＃34; 300＆＃34;反之亦然。

更改特定活动div

0 个答案: