JQuery - вопрос эффективного написания кода

Question

Я добавляю блок HTML на каждую страницу продукта. HTML-код одинаков для каждого продукта, за исключением того, что я меняю изображение.

Сейчас я повторяю весь блок HTML для каждого продукта и предпочел бы просто добавить этот код, а затем вводить новое изображение вместо повторения HTML каждый раз.

Есть ли хороший способ сделать это? Мне нужно добавить HTML на каждую страницу продукта, но мне действительно нужно только переключить изображение (gi-chart и gi-chart-2) в каждом блоке HTML.

Спасибо за любой вклад, я относительно новичок в написании jQuery и хочу убедиться, что делаю это наилучшим образом.

Вот что у меня есть

$( "body" ).each(function() {

    if ( $( this ).hasClass( "product-fruit-nuts-superfood-with-baobab" ) ) {

        $( this )
        $(".eltdf-accordion-holder").each(function() {
        $(this).append('<div class="gi-chart-wrap"><span class="eltdf-title-holder reviews_tab ui-accordion-header ui-state-default ui-corner-all" role="tab" id="ui-id-3" aria-controls="ui-id-4" aria-selected="false" aria-expanded="false" tabindex="-1"><span class="eltdf-accordion-mark"><span class="eltdf_icon_plus icon_plus"></span><span class="eltdf_icon_minus icon_minus-06"></span></span><span class="eltdf-tab-title">GI Chart</span></span></div><div class="eltdf-accordion-content ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" id="ui-id-4" aria-labelledby="ui-id-3" role="tabpanel" aria-hidden="true" style="display: none;"><img src="/wp-content/uploads/2019/01/gi-chart.png" alt="GI Chart" /></div></div>');

    });    

    } else if ( $( this ).hasClass( "product-dark-chocolate-mandarin" ) ) {
        $( this )
        $(".eltdf-accordion-holder").each(function() {
        $(this).append('<div class="gi-chart-wrap"><span class="eltdf-title-holder reviews_tab ui-accordion-header ui-state-default ui-corner-all" role="tab" id="ui-id-3" aria-controls="ui-id-4" aria-selected="false" aria-expanded="false" tabindex="-1"><span class="eltdf-accordion-mark"><span class="eltdf_icon_plus icon_plus"></span><span class="eltdf_icon_minus icon_minus-06"></span></span><span class="eltdf-tab-title">GI Chart</span></span></div><div class="eltdf-accordion-content ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" id="ui-id-4" aria-labelledby="ui-id-3" role="tabpanel" aria-hidden="true" style="display: none;"><img src="/wp-content/uploads/2019/01/gi-chart-2.png" alt="GI Chart" /></div></div>');
    });

    }
});

Вот сайт: https://www.solonutrition.com/product/dark-chocolate-mandarin/

Answer 1

Попробуйте это:

$(function(){
var img1 = "gi-chart.png";
var img2 = "gi-chart-2.png";
var prodHtml = '<div class="gi-chart-wrap"><span class="eltdf-title-holder reviews_tab ui-accordion-header ui-state-default ui-corner-all" role="tab" id="ui-id-3" aria-controls="ui-id-4" aria-selected="false" aria-expanded="false" tabindex="-1"><span class="eltdf-accordion-mark"><span class="eltdf_icon_plus icon_plus"></span><span class="eltdf_icon_minus icon_minus-06"></span></span><span class="eltdf-tab-title">GI Chart</span></span></div><div class="eltdf-accordion-content ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" id="ui-id-4" aria-labelledby="ui-id-3" role="tabpanel" aria-hidden="true" style="display: none;"><img src="/wp-content/uploads/2019/01/'+img1+'" alt="GI Chart" /></div></div>';

$(".product-fruit-nuts-superfood-with-baobab .eltdf-accordion-holder").each(function () {
    $(this).append(prodHtml);
});

$(".product-dark-chocolate-mandarin .eltdf-accordion-holder").each(function () {
    $(this).append(prodHtml.replace(img1, img2));
});

});