0

我有以下 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,重复 6 次sliderf。唯一的区别在于函数的前两行：

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

在这里，t每次p都是不同的（随机）字母。

4

2 回答 2

0

您需要在 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知道如何转换为新货币）。

于 2013-08-30T18:46:05.213 回答
0

提前将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();

            // ...
于 2013-08-30T14:51:16.467 回答