My JavaScript is fairly new and want to learn new ways to create clean, fast code. Can you have a look at this code and guide me on how to optimise this code to improve my skills? I have provided the HTML even though I am not able to edit the actual html as its generated but lets pretend I could..
What I am doing is pulling data from a Product JSON file and manipulating the data to be shown in the website.
function Details(el){
var sku = $(el).attr("data");
$.getJSON("/micro/"+sku, function(json) {
if (json.price!=null) {
$(el+' .p_img img').attr({src:json.images[2].url, alt:json.images[2].altText});
$(el+' .p_img_lrg').attr("src",json.images[1].url);
$(el+' .p_name').text(json.name);
$(el+' .p_url').attr("href",json.url);
$(el+' .p_p').text("£"+Number(json.p.value).toFixed(2));
$(el+' .p_pu').text(json.pu);
$(el+' .p_b_name').text(json.categories[0].name);
$(el+' .p_b_url').attr("href",json.categories[0].url);
if (json.oldPrice != null) {
var pWas = ' .p_was',
pSave = ' .p_save';
$(el+pWas).text("was £"+json.old.value);
$(el+pSave).text("save £"+(json.old.value-json.value));
$(el+pSave).hide();
$(el+pWas).css('margin-left',0).css('padding-left',0).addClass('clr').removeClass('left').css('float','none');
}else{
$(el+pSave,el+pWas).hide();
}
}
if (json.stockLevel==0) {
$(el+' form.add').attr({'action':'/notification','method':'post'}).html('<input type=\"hidden\" name=\"productCodePost\" value=\"'+sku+'\"><input type="submit" value="Out">');
} else {
$(el+' form.add').attr({'action':'/add','method':'post'}).html('<input type=\"hidden\" name=\"productCodePost\" value=\"'+sku+'\"><input type=\"hidden\" name=\"maxOrderQuantity\" value=\"\"><input type="submit" value="Add">');
}
});
}
HTML:
<li data-sku="100000" class="item1">
<div class="bullet">
<sup class="hash">#</sup>
<span>test</span>
</div>
<div class="image">
<a class="p_url" title="" href="#"><img class="p_img_lrg" border="0" alt="" src="" width="210" height="210" /></a>
</div>
<div class="prodinfo">
<h2 class="nomargin"><a class="p_name p_url" href="#"></a></h2>
<div class="more-less">
<div class="more-block"><p></p></div>
</div>
<div class="price">
<div class="now pink bold large-text">
<span class="pricename">now</span>
<span class="p_price">£</span>
</div>
<div class="p_price_unit margin10bottom"></div>
<form class="add_to_cart_form"> </form>
</div>
<div class="morefrom">View All <a class="p_brand_name p_brand_url" title="" href="#"></a> Products</div>
</div>
</li>