CODEWITHSUNDEEP
jqueryperformance
Birdie Golden
Birdie Golden

Reputation: 581

JQuery - A Question of Efficient Code Writing

I am adding a block of HTML to each product page. The HTML is similar for each product with the exception that I'm changing the image.

Right now I'm repeating the entire block of HTML for each product, and I would rather just add that code, then inject a new image vs repeating the HTML each time.

Is there a good way to go about this? I need to add the HTML to each product page, but I really only need to switch the image (gi-chart, and gi-chart-2) in each HTML block.

Thanks for any input on this, I'm relatively new to writing jQuery and want to make sure I'm doing it the best way.

Here's What I Have So Far

$( "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>');
    });

    }
});

Here's the website: https://www.solonutrition.com/product/dark-chocolate-mandarin/

Upvotes: 0

Views: 62

Answers (1)

jagdish.narkar
jagdish.narkar

Reputation: 317

Try this:

$(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));
});

});

Upvotes: 1

Related Questions