根据显示的div更改img src

Question

根据显示的div更改img src

根据显示的.product-boxx，切换相应的step4img对应的src
因为.product-boxx一共有7个，所以最终的结果会有28款，就是需要切换28张图

<div class="container" id="finalform" style="display: flex;">
    <img src="//cdn.shopify.com/s/files/1/0501/9775/8119/files/Banner.jpg?v=1663254286" id="step4img" class=" ls-is-cached lazyloaded">

    <div class="flexboxxxxx">
        <botton id="finaltopback" class="custombtn0">back</botton>
        <botton id="fianlatc" class="custombtn1" onclick="adddd()">Add To Cart</botton> <a href=""
            class="custombtn2">Start Over</a>
    </div>
    <div class="product-boxx" id="product-laptop" style="display:none;">
        <p class="toptext">PRIMARY MOUNT OF YOUR CHOICE</p>
        <div class="product-info"> 
            <a href=" " target="_blank"> 
                <span class="producttitle">Single Arm Laptop Stand(DZ)</span>
            </a>
            <p class="productdes"></p>
        </div>
        <p class="productquality">x 1</p>
        <p class="productprice">$79.99 USD</p>
    <form method="post" action="/cart/add">
        <input type="hidden" name="id" value="42749446029479">
        <input type="submit" value="Add to cart" class="atcbtn" style="opacity: 0;">
    </form>
    </div>

    <div class="product-boxx" id="product-monitor" style="display:none;">
        <p class="toptext">PRIMARY MOUNT OF YOUR CHOICE</p>
        <div class="product-info">
            <a href=" " target="_blank">
                <span class="producttitle">Single Arm Monitor Stand(DZ)</span>
            </a>
            <p class="productdes"></p>
        </div>
        <p class="productquality">x 1</p>
        <p class="productprice">$69.99 USD</p>
        <form method="post" action="/cart/add">
            <input type="hidden" name="id" value="42749450616999">
            <input type="submit" value="Add to cart" class="atcbtn" style="opacity: 0;">
        </form>
    </div>
    <div class="product-boxx" id="product-lapmon" style="">
        <p class="toptext">PRIMARY MOUNT OF YOUR CHOICE</p>
        <div class="product-info">
            <a href=" " target="_blank">
                <span class="producttitle">Dual Arm Stand for Laptop and Monitor(DZ)</span>
            </a>
            <p class="productdes"></p>
        </div>
        <p class="productquality">x 1</p>
        <p class="productprice">$99.99 USD</p>
        <form method="post" action="/cart/add">
            <input type="hidden" name="id" value="42749457858727">
            <input type="submit" value="Add to cart" class="atcbtn" style="opacity: 0;">
        </form>
    </div>
    <div class="product-boxx" id="product-monitor2" style="display:none;">
        <p class="toptext">PRIMARY MOUNT OF YOUR CHOICE</p>
        <div class="product-info">
            <a href=" " target="_blank">
                <span class="producttitle">Dual Arm Monitor Stand(DZ)</span>
            </a>
            <p class="productdes"></p>
        </div>
        <p class="productquality">x 1</p>
        <p class="productprice">$89.99 USD</p>
        <form method="post" action="/cart/add">
            <input type="hidden" name="id" value="42749461004455">
            <input type="submit" value="Add to cart" class="atcbtn" style="opacity: 0;">
        </form>
    </div>
    <div class="product-boxx" id="product-light" style="">
        <p class="toptext">RING LIGHT OF YOUR CHOICE</p>
        <div class="product-info">
            <a href=" " target="_blank">
                <span class="producttitle">12“ Ring Light Set with Arm (DZ)</span>
            </a>
            <p class="productdes"></p>
        </div>
        <p class="productquality">x 1</p>
        <p class="productprice">$70.00 USD</p>
        <form method="post" action="/cart/add">
            <input type="hidden" name="id" value="42749468639399">
            <input type="submit" value="Add to cart" class="atcbtn" style="opacity: 0;">
        </form>
    </div>
    <div class="product-boxx" id="product-pad" style="">
        <p class="toptext">TABLET HOLDER OF YOUR CHOICE</p>
        <div class="product-info">
            <a href=" " target="_blank">
                <span class="producttitle">Tablet Holder with Arm(DZ)</span>
            </a>
            <p class="productdes"></p>
        </div>
        <p class="productquality">x 1</p>
        <p class="productprice">$39.99 USD</p>
        <form method="post" action="/cart/add">
            <input type="hidden" name="id" value="42749478699175">
            <input type="submit" value="Add to cart" class="atcbtn" style="opacity: 0;">
        </form>
    </div>
    <div class="product-boxx" id="product-micro" style="display:none;">
        <p class="toptext">MICROPHONE ARM OF YOUR CHOICE</p>
        <div class="product-info">
            <a href=" " target="_blank">
                <span class="producttitle">Microphone Mount with Parallel Connector</span>
            </a>
            <p class="productdes"></p>
        </div>
        <p class="productquality">x 1</p>
        <p class="productprice">$39.99 USD</p>
        <form method="post" action="/cart/add">
            <input type="hidden" name="id" value="42749487186087">
            <input type="submit" value="Add to cart" class="atcbtn" style="opacity: 0;">
        </form>
    </div>
    <hr align="center" width="100%" style="background:#000;height:1px;">
    <div class="bottombox">
        <div class="bottonbox">
            <botton id="step4-back" class="custombtn0">back</botton> <a href="/cart" class="custombtn1"
                target="_blank">View Carts</a> <a href="" class="custombtn2">Start Over</a>
        </div>
        <div class="pricebox">
            <p class="total">Estimated total: $</p> <input type="text" id="finalprice" disabled="">
            <p class="totaltext">Estimated total does not include freight. The freight will be informed after you
                provide the address.</p>
        </div>
    </div>

</div>

Answer 1

根据步骤2得到图片容器设置下步骤4的图片就行，改下setSum这个函数，如下

    function setSum() {
/////图片设置
        var step1option = $("input[name='equipment']:checked").val(), stepId;
        switch (step1option) {
            case 'laptop': stepId = 'step2-laptop'; break;
            case 'monitor': stepId = 'step2-monitor'; break;
            case 'laptopmonitor': stepId = 'step2-lapmoni'; break;
            case 'monitormonitor': stepId = 'step2-monitor2'; break;
        }
        var src = $('#' + stepId).find('img.accessories-img').attr('src');
        console.log(src)
        $('#step4img').attr('src',src)

/////图片设置



        var sum = 0;
        $('#finalform .product-boxx:visible p.productprice').each(function () {
            sum += parseFloat(this.innerText.substring(1));
        });
        sum = sum.toFixed(2);//保留2位小数，防止浮点数计算精度丢失
        $('#finalprice').val(sum)


        $('#fianlatc').unbind().click(async function () {
            var btns = $('#finalform .product-boxx:visible input.atcbtn');
            for (var i = 0; i < btns.length; i++) {
                //await控制循序请求，2秒点一个按钮
                await clickButton(btns.eq(i))
            }
        })

    }