jQueryを使用して、範囲スライダで設定された数値に応じて価格を変更する

Question

私の最初の投稿ですので、優しくしてください。 1〜100の範囲の最小値と最大値を持つ範囲スライダがあります。 私の価格構成は、ユーザーが範囲スライダでどれだけ多くを選ぶかに依存して£1.99から£1.19と言います。 これを達成するための最良の方法は、switch文またはif else文のいずれかを使用してください。 選択された値はPHP経由でバックポストで検証されるので、私はこの質問のセキュリティについて心配していません。私が何かを見逃してしまった場合は、お詫びします。

$(document).ready(function() { 
 
\t $("#slider").slider({ 
 
\t \t range: "min", 
 
\t \t animate: "slow", 
 
\t \t value:1, 
 
\t \t min: 1, 
 
\t \t max: 100, 
 
\t \t step: 1, 
 
\t \t slide: function(event, ui) { 
 
\t \t \t update(1,ui.value); //changed 
 
\t \t } 
 
\t }); 
 
\t //Inital values when page loads, amount is set to 1 as this is the minimum a user can buy. 
 
\t $("#amount").val(1); 
 
\t $("#price").val(1.99); 
 
\t $("#amount-label").text(0); 
 
\t $("#price-label").text(0); 
 
\t update(); 
 
}); 
 

 

 

 
//changed. now with parameter 
 
function update(slider,val) { 
 
\t //changed. Now, directly take value from ui.value. if not set (initial, will use current value.) 
 
\t var $amount = slider == 1?val:$("#amount").val(); 
 
\t var $price = $("#price").val(); 
 
\t 
 
\t 
 
\t $total = "£" + ($amount * $price).toFixed(2); 
 
\t $("#amount").val($amount); 
 
\t $("#amount-label").text($amount); 
 
\t $("#price").val($price); 
 
\t $("#price-label").text($price); 
 
\t $("#total").val($total); 
 
\t $("#total-label").text($total); 
 
\t 
 
\t $('#slider a').html('<label><span class="glyphicon glyphicon-chevron-left"></span> '+$amount+' <span class="glyphicon glyphicon-chevron-right"></span></label>'); 
 
}

Answer 1

あなたが物事のUI側を扱うことができるようだし、あなたの本当のクエリは、範囲のデシベル主導のセットになりますどのような範囲の選択を管理する方法についてです。

これは可能な解決策です（テストされていません）。 rangeFromとrangeTo配列は、配列の境界を保持します。 val配列には一致する値が格納されます。ユーザーが選択した数量で関数を呼び出すと、一致するものが見つかるまで配列を歩いて値を返します。一致しない場合は-1を返します。あなたはDB-駆動システムに取り組んでいる、それは本質的に拡張可能であるため、このアプローチはcase文よりも優れている推論に基づいて

function getVal(qty) { 

var rangeFrom = [1, 11, 26] // lower bound of ranges 
var rangeTo = [10, 25, 50] // upper bound of ranges 
var val = [1.99, 1.79. 1.49] // values for ranges 

var result = -1 // set to indicate fail 
for (var i = 0; i < rangeFrom.length; i = i + 1) { 

    if (qty >= rangeFrom[i] && qty <= rangeTo[i]) { 
     result val[i] 
     break; 
    } 

return result; // will be -1 if no match. 
} 

- あなたはより多くの量のバンドを持っているならば、あなただけの配列内の複数のエントリを持っています。また、ajaxなどを介して配列を簡単に渡すこともできます。