jQuery-一个有效的代码编写问题 [英] JQuery - A Question of Efficient Code Writing

问题描述

我正在向每个产品页面添加HTML块.除了我要更改图像之外，每种产品的HTML都相似.

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.

现在，我要为每种产品重复整个HTML块，而我宁愿只是添加该代码，然后注入新图像，而不是每次都重复HTML.

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.

是否有解决此问题的好方法?我需要将HTML添加到每个产品页面，但实际上我只需要在每个HTML块中切换图像(gi-chart和gi-chart-2).

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.

感谢您的任何投入，我对编写jQuery还是比较陌生，并希望确保以最佳方式做到这一点.

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.

这是我到目前为止所拥有的

$( "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/

推荐答案

尝试一下:

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

});

这篇关于jQuery-一个有效的代码编写问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！