如何简化这个重复性的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代码？

回答

相关问题