0

在这里拉小提琴！

你好，

我需要一些帮助来解决一个非常简单的 Javascript 问题。我正在做一个基于 4 个不同变量的滑块。我已将其简化为将它们显示为服务器 E 到服务 G。每项服务的每平方米价格不同，但我不希望所有服务都显示在屏幕上。我希望输出来自下拉列表的选择。

$(function() {
    $( "#slider" ).slider({
        value:10,
        min: 0,
        max: 60,
        step: 1,
        slide: function( event, ui ) {
            $( "#amount" ).val( ui.value );
            $( "#d" ).val( "£" + ui.value * 750 );
            $( "#e" ).val( "£" + ui.value * 800 );
            $( "#f" ).val( "£" + ui.value * 900 );
            $( "#g" ).val( "£" + ui.value * 1125 );
        }
    });
});

我不想拥有#e #d 等，而是喜欢#totalPrice 之类的，它基于他们从下拉列表中选择的选项

<option></option>
<option>Service D</option>
<option>Service E</option>  
<option>Service F</option>
<option>Service G</option>

是否可以在 Javascript 变量中创建这些变量，然后在 HTML 中输出，无论选择哪一个。希望我让每个人都变得简单。任何帮助将非常感激 ：）

在这里拉小提琴！

4

1 回答 1

0

您可以做几件事。一个相对简单和干净的方法是这样的：

首先，用每单位表面的价格标记每个服务选项。您可以使用 HTML5 数据属性执行此操作：

<option data-unit-value="750">Service D</option>
<option data-unit-value="800">Service E</option>  
<option data-unit-value="900">Service F</option>
<option data-unit-value="1125">Service G</option>

然后从slide处理程序中引用所选选项并获取要包含在计算中的单位值：

// not included: rigorous checks (e.g. what happens if nothing selected?)
var unitValue = $("#myList > :selected").attr("data-unit-value");
$("#amount" ).val(ui.value);
$("#total").val("£" + ui.value * unitValue);

最后不要忘记更改下拉列表中的选定值也会导致总数更新：

$("#myList").change(function() {
    var unitValue = $("#myList > :selected").attr("data-unit-value");
    $("#total").val("£" + $("#slider").slider("value") * unitValue);
});

更新了小提琴。

于 2013-10-17T10:25:32.770 回答