根據單選按鈕和Jquery滑塊選擇乘以跨度文本

Question

我正在嘗試匯總產品的選擇流程，但在定義值時遇到了一個小問題。

本質上，我想做的是根據選擇的哪個選項乘以行數獲得總輸出。 我不確定如何執行此操作，因為滑塊不會以固定增量遞增。

 $("#slider").slider( { value:1, min: 0, max: 9, step: 1, } ); var items =[ '1 <br>line','2 <br>lines','3 <br>lines','4 <br>lines','5 <br>lines','8 <br>lines','10 <br>lines','15 <br>lines','20+ <br>lines']; var s = $("#slider"); s.slider({ min:1, max:items.length }); var oneBig = 100 / (items.length - 1); $.each(items, function(key,value){ var w = oneBig; if(key === 0 || key === items.length-1) w = oneBig/2; $("#legend").append("<label style='width: "+w+"%'>"+value+"</laben>"); }); //sum start /////////////// $(":radio").on("change", function(){ var total = 0; $(":radio:checked").each(function(){ total += Number(this.value); }); $("#total").text(total); }); 

 h3 { margin-top:30px; } #slider label { position: absolute; width: 20px; margin-left: -10px; text-align: center; margin-top: 20px; } #slider { width: 100%; margin: 2em auto; } .lines { font-size:10px; } label { display: inline-block; text-align:center; line-height: 1.5; font-weight:bold; } label:first-child { text-align:left; } label:last-child { text-align:right; } .slide-col #slider a { border: 1px solid #fff; background: #1b2a3d; } 

 <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/smoothness/jquery-ui.min.css" rel="stylesheet" type="text/css" /><script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script><script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script> <input class="qty1" name="phone" type="radio" value="5.99" />option 1 <input class="qty1" name="phone" type="radio" value="9.99" />option 2 <input class="qty1" name="phone" type="radio" value="7.99" />option 3 <div id="slider"></div> <div id="legend"></div> <br> <h3>Your total is: £<span id="total">0.00</span></h3> 

Answer 1

更新：您可以自定義滑塊的值。 還增加了功能來計算總價值。

 let $slider = $('#slider'), $legend = $('#legend'), $total = $('#total'), total = 0, lines = [1, 2, 3, 4, 5, 8, 10, 15, 20]; lines.forEach( (value, key) => { let oneBig = 100 / (lines.length - 1); let width = (key === 0 || key === lines.length -1) ? oneBig / 2 : oneBig; let text = (key !== lines.length - 1) ? value + ' <br>lines' : value + '+ <br>lines'; let label = $('<label/>') .css({ 'width': width + '%'}) .html(text); $legend.append(label); }); $(":radio").on("change", function(){ updateTotal(lines[$slider.slider("option", "value")]); }); $slider.slider({ value: 0, min: 0, max: 8, step: 1, create: () => { updateTotal(lines[$slider.slider('value')]); }, slide: (events, ui) => { updateTotal(lines[ui.value]); } }); function updateTotal (value) { total = value * $("input[name='phone']:checked").val(); $total.text(total.toFixed(2)); } 

 h3 { margin-top: 10px; } #slider label { position: absolute; width: 20px; margin-left: -10px; text-align: center; margin-top: 20px; } #slider { width: 100%; margin: 1em auto; } .lines { font-size:10px; } label { display: inline-block; text-align:center; line-height: 1.5; font-weight:bold; } label:first-child { text-align:left; } label:last-child { text-align:right; } .slide-col #slider a { border: 1px solid #fff; background: #1b2a3d; } 

 <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/smoothness/jquery-ui.min.css" rel="stylesheet" type="text/css" /><script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script><script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script> <input class="qty1" name="phone" type="radio" value="5.99" checked/>option 1 <input class="qty1" name="phone" type="radio" value="9.99" />option 2 <input class="qty1" name="phone" type="radio" value="7.99" />option 3 <div id="slider"></div> <div id="legend"></div> <br> <h3>Your total is: £<span id="total">0.00</span></h3> 

Answer 2

嘗試這樣的事情： http : //jsfiddle.net/b64Ug/224/如果您注意到，我已經將'slide'屬性附加到您的滑塊上，該屬性將在每次更改滑塊值時被調用。 您可能需要為邊緣情況添加一些檢查。

$("#slider").slider(
    {
        value:1,
        min: 0,
        max: 9,
        step: 1,
    }
);
var valueMap = [0, 1, 2, 3, 4, 5, 8, 10, 15, 20];

var items =[ '1 <br>line','2 <br>lines','3 <br>lines','4 <br>lines','5 <br>lines','8 <br>lines','10 <br>lines','15 <br>lines','20+ <br>lines'];

var s = $("#slider");

s.slider({
  min:1,
  max:items.length,
  slide: function( event, ui ) {
        $("#total").text("$" +  (valueMap[ui.value] * $('input[name=phone]:checked').val()));
      }
});

var oneBig = 100 / (items.length - 1);

$.each(items, function(key,value){
  var w = oneBig;
  if(key === 0 || key === items.length-1)
    w = oneBig/2;

  $("#legend").append("<label style='width: "+w+"%'>"+value+"</laben>");  

});



//sum start ///////////////



$(":radio").on("change", function(){
    var total = 0;
    $(":radio:checked").each(function(){
        total = Number(this.value) * valueMap[Number($( "#slider" ).slider( "value" ))];
    });

   $("#total").text(total);
});