如何簡化這個重複性的jQuery代碼？

我做了一個很好的jQuery腳本，我只想看看是否有人有簡化它的提示，尤其是定義變量的開始部分。如何簡化這個重複性的jQuery代碼？

雖然我在直代碼簡化真的有興趣，這裏是什麼腳本實際上做一個快速的簡介：

查找與一類「旅遊」的鏈接和定義了3個以上的HREF的變化屬性（換出一個4位數字）。
將替換爲其他4位數值的不同內容替換爲「遊覽」類的鏈接。
隨着a.tour被替換，部分內容的可見性在懸停時切換。

而這裏的代碼：

HTML：

<a href="http://www.awebsite.com/7838" class="tour">Link</a>

JQUERY：

<script> 
$(document).ready(function() { 
    var aud = $('.tour').attr('href'); 
    var usd = $('.tour').attr('href').replace(7838,'8062'); 
    var gbp = $('.tour').attr('href').replace(7838,'8907'); 
    var eur = $('.tour').attr('href').replace(7838,'8914'); 
    $('.tour').replaceWith('<div class="currency"><p>Price &amp; Bookings</p><ul class="currencydd" style="display:none"><li><a href="' + aud + '">Australian Dollar (AUD)</a></li><li><a href="' + usd + '">United States Dollar (USD)</a></li><li><a href="' + gbp + '">British Pounds (GBP)</a></li><li><a href="' + eur + '">Euros (EUR)</a></li></ul></div>'); 
    $('.currency').hover(function() { 
    $('.currencydd').slideToggle("fast"); 
}); 
}); 

</script>

來源

2012-03-13 javascriptless

不要一直反覆使用$(".tour")，定義一個等於它的變量會更加整潔和高效。此外，您不需要繼續檢查該.attr("href")因爲一旦你存儲在aud值，你可以使用：使用aud

var $tour = $(".tour"), 
    aud = $tour.attr('href'), 
    usd = aud.replace(7838,'8062'), 
    gbp = aud.replace(7838,'8907'), 
    eur = aud.replace(7838,'8914'); 

$tour.replaceWith(...);

請注意，您的代碼會更新（替換）所有.tour環節， usd等值從第一個.tour鏈接。這是你想要的，還是應該單獨更新它們？

來源

2012-03-13 06:12:14 nnnnnn

那麼對於初學者，你可以有以下幾點：

var $aud = $('.tour').attr('href'), 
    $usd = $aud.replace(7838,'8062'), 
    $gbp = $aud.replace(7838,'8907'), 
    $eur = $aud.replace(7838,'8914');

來源

2012-03-13 06:08:08

var treplace=function(with){ $('.tour').attr('href').replace(7838,with);}; 
var usd = treplace('8062'); 
var gbp = treplace('8907'); 
var eur = treplace('8914');

更妙的是，如果你想大量的貨幣

var abbrev=["USD","GBP","EUR"] 
var codes=[8062,8907,8924] 
var names=["US Dollar","British Pounds","Aussie Dollar"] 
var treplace=function(with){ $('.tour').attr('href').replace(7838,with);}; 
var s='<div class="currency"><p>Price &amp; Bookings</p><ul>'; 
for(i in abbrev){ 
//build the rest of the HTML here, using the arrays 

} 
s+='</ul></div>' 
$('.tour').replaceWith(s)

你也可以使用一個二維數組或自定義對象，而不是三個陣列中，你可以做這樣的事情。

來源

2012-03-13 06:11:55 Manishearth

2建議：

1：寫地址變換如

function currencyExchange(srcUrl){ 
return srcUrl.substring(0,preLength) + rate * Number(src.substring(preLength)); 
}

2的函數：使用JavaScript模板技術簡單地將新的元件結構。

來源

2012-03-13 06:21:29

這並不短，但絕對更優化，更具擴展性。未經測試：

var href = $('.tour').attr('href'), 
    items = '', 
    currency = { 
     aud : { 
      name : 'Australian Dollar', 
      value : 1 
     }, 
     usd : { 
      name : 'United States Dollar', 
      value : 1.05 
     }, 
     eur : { 
      name : 'Euros', 
      value : 0.8 
     }, 
     gbp : { 
      name : 'British Pounds', 
      value : 0.67 
     } 
    } 

for (var c in currency) { 

    var num = href.match(/\d+/), // Simple regex, maybe too simple... 
     conv = Math.ceil(currency[c].value * num), 
     url = href.replace(num, conv); 

    items += '<li>' + 
     '<a href="' + url + '">' + 
      currency[c].name + ' (' + c.toUpperCase() + ')' + 
     '</a>' + 
    '</li>'; 
} 

$('.tour').replaceWith('<div><ul>' + items + '</ul></div>');

來源

2012-03-13 06:33:16 elclanrs

$(document).ready(function() { 
    var ref = $('.tour').attr('href'); 
    function G(t) {return ref.replace(7838, t=='eur'?'8914':t=='usd'?'8062':t=='gbp'?'8907':'7838');} 
    $('.tour').replaceWith('<div class="currency"><p>Price &amp; Bookings</p><ul class="currencydd" style="display:none"><li><a href="' + G('aud') + '">Australian Dollar (AUD)</a></li><li><a href="' + G('usd') + '">United States Dollar (USD)</a></li><li><a href="' + G('gbp') + '">British Pounds (GBP)</a></li><li><a href="' + G('eur') + '">Euros (EUR)</a></li></ul></div>'); 
    $('.currency').hover(function() { 
     $('.currencydd').slideToggle("fast"); 
    }); 
});

FIDDLE

來源

2012-03-13 07:31:32 adeneo

如何簡化這個重複性的jQuery代碼？

回答

相關問題