关于选择变化的jQuery数学

因此，使用jQuery我能够弄清楚如何通过选择下拉菜单来更改跨度范围内的HTML值，但这有点不方便。代码如下：http://jsfiddle.net/flinx777/ZMjun/关于选择变化的jQuery数学

目前，我正在从选择的选区中抓取类，并用类值替换跨度中的文本。相反，我倾向于定义跨度HTML（在此定义产品的价格），并且当有人从选择中选择时，它会增加或减少价格。因此，例如，我想作出选择HTML这样的：

<select id="price_change" name="buckle options"> 
<option value="" class="">Please select</option> 
<option value="Stainless steel" class="">Stainless Steel</option> 
<option value="Titanium" class="+20">Titanium</option> 
<option value="No Buckle" class="-10">No Buckle</option> 
</select>

这样我可以在选择选项的类定义来添加或从产品价格中减去（这是在跨度）而不是像目前我所做的那样，不得不手动在选择中进行数学运算。

谢谢！

来源

2011-10-05 flinx777

而问题是什么？ –

你会在网页上有多个产品吗？ – thirtydot

你可以尝试这样的事情：

http://jsfiddle.net/Fft7G/

但在我看来，它是STANGE设定价格类

来源

2011-10-05 18:30:20

嘿Benoit，感谢那个jsfiddle ......很好。而不是班级，你推荐什么？我可以轻松地将其切换出来。我只是将其更改为“数据偏移量”，正如Daniel A. White在上面的响应中所建议的那样，并且工作正常。请原谅我的无知，但为什么要用课堂不好？ – flinx777

是的，数据是一个很好的方法来做到这一点！ –

你应该使这些data-属性，而不是class。

<select id="price_change" name="buckle options"> 
<option value="" data-offset="0">Please select</option> 
<option value="Stainless steel" data-offset="0">Stainless Steel</option> 
<option value="Titanium" data-offset="+20">Titanium</option> 
<option value="No Buckle" data-offset="-10">No Buckle</option> 
</select>

然后你可以做。

var offset = parseInt($(someSelector).data('offset'), 10);

来源

2011-10-05 18:27:08

小心数据和数字。我相信它会截断前导0，导致检索时数据偏移量= 0为数据偏移量=“”。 –

@然后'parseInt'将返回'0'。 –

/facepalm。这就是我没有阅读的结果。 Durface。 –

您可以使用属性 “值”

<select id="price_change" name="buckle options"> 
    <option value="135" >Please select</option> 
    <option value="135" >Stainless Steel</option> 
    <option value="155" >Titanium</option> 
    <option value="125" >No Buckle</option> 
</select>

更改您建议的代码：

$(document).ready(function(){ 
    //Changes the price on the page if a selection is made with a price modifier 
    $("#price_change").change(function() { 
     var price = $(this).children("option:selected").val(); 
     $(".product_price").html(price); 
    }); 
});

来源

2011-10-05 18:41:09

如果您使用value属性，那么当您发布表单时，这些值将被张贴，而不是选项的名称 – ZolaKt

这工作
http://jsfiddle.net/Vw5Ms/5/

但人，这是SOOOO脏

来源

2011-10-05 18:41:48 ZolaKt

关于选择变化的jQuery数学

回答

相关问题