Как упростить этот повторяющийся код jquery?

Question

Я создал сценарий jQuery, который отлично работает, я хотел бы посмотреть, есть ли у кого-нибудь советы по его упрощению, в частности начальная часть, в которой определены переменные.

Хотя я действительно заинтересован в прямом упрощении кода, вот краткий синопсис на то, что на самом деле делает скрипт:

1. Похожа ссылку с классом «туром» и определяет еще 3 вариации его HREF атрибут (замена 4-значного числа).
2. Заменяет ссылки на класс «тур» с различным содержимым, которое заменяет дополнительные 4-значные значения.
3. С заменой 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> 

Answer 1

Не используйте снова и снова $(".tour"), он является более аккуратным и более эффективным для определения переменной, равной ей. Кроме того, вам не нужно держать проверки .attr("href"), потому что, как только вы сохранили это значение в 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 ссылки с помощью aud, usd и т. Д. Значения от первого .tour ссылка. Это то, что вы намерены или должны обновлять их индивидуально?

Answer 2

хорошо для начала вы могли бы иметь следующее:

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

Answer 3

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) 

Вы также можете использовать 2D массив или пользовательский объект, а не из трех массивов.

Answer 4

2 предложения:

1: написать функцию для преобразования URL-адреса, такие как

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

2: Использование JavaScript технику шаблона просто новый элемент строительства.

Answer 5

Это не короче, но определенно более оптимизировано и расширяемо. Непроверенные:

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>'); 

Answer 6

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