Изменить часть атрибута изображения src / dataimage на конкретный активный div

Question

Спасибо, что заглянули и нашли время, чтобы прочитать это.Очень признателен.

Для нашего веб-сайта у нас есть слайдер, показывающий упаковку продуктов.Слайдер работает следующим образом:

• В настоящее время вы можете выбрать цвет, и изображение пакета обновится и покажет выбранный цвет.Изображение src в .header-module-images будет обновлено с атрибутом DATA-IMAGE из активного диапазона из .header-module-swatches.
• Также название цвета отображается ниже соответствующим цветом.Диапазон из 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();
              });
        });     
    },

Цель:

Я хочу сделать так, чтобы при выборе определенного размера часть цены image src в .header-module-images AND Атрибут data-image в .header-module-swatches обновлен, только заменив 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">

Кто может подтолкнуть меня в правильном направлении?

Проще всего было бы обновить data-productcode внутри.product-header-varsions в "150" / "300", и когда диапазон .product-header-Варианты активен, в # product-packaging-container "150" заменяется активным кодом-product-product code "300" и наоборот.