jquery - 更改特定活动 div 上的图像 src/dataimage 属性的一部分

Question

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

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

• 您当前可以选择一种颜色，并且 package-image 将更新并显示所选颜色。.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-images和.header-module-swatches 中的data-image 属性中的价格图像 src 的一部分，仅将 150 替换为 300。所以：

 <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 中的 data-productcode 更新为“150”/“300”，并且当 .product-header-variations 跨度处于活动状态时，将 #product-packaging-container 中的“150”替换为活动数据产品代码“300”，反之亦然。

标签： jqueryslider