關於選擇變化的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數學

回答

相關問題