Question

我有以下jQuery代码，其中很大一部分被反复使用。是否有某种方法可以减少重复次数？

        // first slider
    $("#slider").slider({

        value: "0",
        min: 0,
        max: 3,
        step: 1,
        slide: function(event, ui) {

            $("#price").val(t[ui.value]);
            $("#amount").val(p[ui.value]);
            var aaa = $("#price").val();
            var bbb = $("#priceb").val();
            var ccc = $("#pricec").val();
            var ddd = $("#priced").val();
            var eee = $("#pricee").val();
            var fff = $("#pricef").val();
            var ggg = $("#priceg").is(":checked") ? 100 : 0;
            var hhh = $("#priceh").is(":checked") ? 100 : 0;
            var iii = $("#pricei").is(":checked") ? 100 : 0;
            total.val(+1500 + +aaa + +bbb + +ccc + +ddd + +eee + +fff + +ggg + +hhh + +iii);
            var GBP = parseInt(total.val());
            var EUR = fx.convert(GBP, {to: "EUR"});
            var USD = fx.convert(GBP, {to: "USD"});
            var CAD = fx.convert(GBP, {to: "CAD"});
            var SGD = fx.convert(GBP, {to: "SGD"});
            var AUD = fx.convert(GBP, {to: "AUD"});
            var ZAR = fx.convert(GBP, {to: "ZAR"});
            EUR = (Math.round(EUR / 100) * 100);
            USD = (Math.round(USD / 100) * 100);
            CAD = (Math.round(CAD / 100) * 100);
            AUD = (Math.round(AUD / 100) * 100);
            SGD = (Math.round(SGD / 100) * 100);
            ZAR = (Math.round(ZAR / 100) * 100); 
            GBP = accounting.formatMoney(GBP, "GBP £ ", 0, ",", ".");
            EUR = accounting.formatMoney(EUR, "EUR € ", 0, ",", ".");
            USD = accounting.formatMoney(USD, "USD $ ", 0, ",", ".");
            CAD = accounting.formatMoney(CAD, "CAD $ ", 0, ",", ".");
            AUD = accounting.formatMoney(AUD, "AUD $ ", 0, ",", ".");
            SGD = accounting.formatMoney(SGD, "SGD $ ", 0, ",", ".");
            ZAR = accounting.formatMoney(ZAR, "ZAR R ", 0, ",", ".");
            $("#total").val(GBP);
            $("#totaleur").val(EUR);
            $("#totalusd").val(USD);
            $("#totalcad").val(CAD);
            $("#totalaud").val(AUD);
            $("#totalsgd").val(SGD);
            $("#totalzar").val(ZAR);
        }
    });

    // second slider
    $("#sliderb").slider({
        value: "0",
        min: 0,
        max: 3,
        step: 1,
        slide: function(event, ui) {
            $("#priceb").val(d[ui.value]);
            $("#amountb").val(b[ui.value]);
            var aaa = $("#price").val();
            var bbb = $("#priceb").val();
            var ccc = $("#pricec").val();
            var ddd = $("#priced").val();
            var eee = $("#pricee").val();
            var fff = $("#pricef").val();
            var ggg = $("#priceg").is(":checked") ? 100 : 0;
            var hhh = $("#priceh").is(":checked") ? 100 : 0;
            var iii = $("#pricei").is(":checked") ? 100 : 0;
            total.val(+1500 + +aaa + +bbb + +ccc + +ddd + +eee + +fff + +ggg + +hhh + +iii);
            var GBP = parseInt(total.val());
            var EUR = fx.convert(GBP, {to: "EUR"});
            var USD = fx.convert(GBP, {to: "USD"});
            var CAD = fx.convert(GBP, {to: "CAD"});
            var SGD = fx.convert(GBP, {to: "SGD"});
            var AUD = fx.convert(GBP, {to: "AUD"});
            var ZAR = fx.convert(GBP, {to: "ZAR"});
            EUR = (Math.round(EUR / 100) * 100);
            USD = (Math.round(USD / 100) * 100);
            CAD = (Math.round(CAD / 100) * 100);
            AUD = (Math.round(AUD / 100) * 100);
            SGD = (Math.round(SGD / 100) * 100);
            ZAR = (Math.round(ZAR / 100) * 100); 
            GBP = accounting.formatMoney(GBP, "GBP £ ", 0, ",", ".");
            EUR = accounting.formatMoney(EUR, "EUR € ", 0, ",", ".");
            USD = accounting.formatMoney(USD, "USD $ ", 0, ",", ".");
            CAD = accounting.formatMoney(CAD, "CAD $ ", 0, ",", ".");
            AUD = accounting.formatMoney(AUD, "AUD $ ", 0, ",", ".");
            SGD = accounting.formatMoney(SGD, "SGD $ ", 0, ",", ".");
            ZAR = accounting.formatMoney(ZAR, "ZAR R ", 0, ",", ".");
            $("#total").val(GBP);
            $("#totaleur").val(EUR);
            $("#totalusd").val(USD);
            $("#totalcad").val(CAD);
            $("#totalaud").val(AUD);
            $("#totalsgd").val(SGD);
            $("#totalzar").val(ZAR);
        }
    });

对slidera，sliderb，sliderc，sliderd，slidere，sliderf重复6次。唯一的区别在于函数的前两行：

$("#price").val(t[ui.value]);
$("#amount").val(p[ui.value]);

此处，t和p每次都是不同的（随机）字母。

Answer 1

提前将t和p等效数据作为数据成员附加到每个滑块。

$("#slider").data('prices', p);
$("#slider").data('amounts', t);
$("#slidera").data('prices', q);
$("#slidera").data('amounts', u);
// etc.

然后在你的处理程序中引用它：

$("#slider, #slidera, #sliderb").slider({   // or use a shared class

        value: "0",
        min: 0,
        max: 3,
        step: 1,
        slide: function(event, ui) {

            var prices = $(this).data('prices');
            var amounts = $(this).data('amounts');
            $("#price").val(prices[ui.value]);
            $("#amount").val(amounts[ui.value]);
            var aaa = $("#price").val();
            var bbb = $("#priceb").val();

            // ...

Answer 2

您需要的是在HTML中嵌入更多信息。

这个脚本现在可以单独使用每个盒子，盒子相当笨。它们与它们发生的事情没有任何关系，任何变化都需要编辑HTML和脚本。如果您要为每个元素添加属性，而脚本会通过这些属性来确定行为的行为，那该怎么办？

想象一下：

<input type="number" class="price">
<input type="hidden" class="price" value="250">
<label><input type="checkbox" class="price_check" value="100"> Option 1</label>
<label><input type="checkbox" class="price_check" value="100"> Option 2</label>

<input type="text" class="total">
<input type="text" class="total" data-currency="EUR">
<input type="text" class="total" data-currency="USD">

输入有class表示它们是价格字段。（复选框具有不同的属性，因此它们更容易选择和单独过滤。）输出指定它们应该是什么货币。

现在，我们可以通过class属性拉入整个组，而不必单独使用每个元素，并对每个元素执行相同的操作。

var total_amt = 1500;
$('input.price').add($('input.price_check').filter(':checked'))
    .each(function() { total_amt += parseInt(this.value); });


$('.total[data-currency]').each(function() {
    var unit = "GBP";

    var value = total_amt;
    if (this.hasAttribute('data-currency')) {
        unit  = this.getAttribute('data-currency');
        value = Math.round(fx.convert(value, {to: unit}) / 100) * 100;
    }
    this.value = accounting.formatMoney(value, unit, 0, ",", '.');
}

现在，如果您想添加价格字段，您只需将其添加到HTML中，脚本就可以自动执行正确的操作。与货币相同（尽管您需要确保fx知道如何转换为新货币）。

jQuery - 如何减少代码中的重复？

2 个答案: