javascript - 基于单选按钮和 Jquery slider 选择乘以跨度文本

Question

我正在尝试整合产品的选择流程，但在定义值时遇到了一些小问题。

本质上，我想做的是根据他们选择的选项乘以行数得到总输出。但是，我不确定如何执行此操作，因为 slider 不会按常规增量上升。

$("#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

更新:您可以自定义 slider 的值。还添加了计算总值(value)的功能。

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>