Javascript 基于单选按钮和Jquery滑块选择的多跨文本

我试图为一个产品建立一个选择流程，但我在定义一个值时遇到了一个小问题

基本上，我试图做的是根据他们选择的选项，乘以行数，得到一个总输出。我不知道如何做到这一点，但是，由于滑块不会定期上升

$（“#滑块”）.滑块(
{
价值：1，
分:0,，
最高：9，
步骤：1，
}
);
变量项=['1
行'，'2
行'，'3
行'，'4
行'，'5
行'，'8
行'，'10
行'，'15
行'，'20+
行']；
var s=$（“#滑块”）；
s、 滑块({
民:1,，
max:items.length
});
var oneBig=100/（项目长度-1）；
$。每个（项目、功能（键、值）{
var w=一个大的；
if（key==0 | | key==items.length-1）
w=1大/2；
$（“#图例”）。追加（“+value+”）；
});
//总和起点///////////////
$（“：radio”）。打开（“更改”，函数（）{
var合计=0；
$（“：radio:checked”）。每个（函数（）{
总数+=数量（该值）；
});
$（“#总计”）。正文（总计）；
});
h3{
边缘顶部：30px；
}
#滑块标签{
位置：绝对位置；
宽度：20px；
左边距：-10px；
文本对齐：居中；
边缘顶部：20px；
}
#滑块{
宽度：100%；
利润率：2米自动；
}
.台词{
字体大小：10px；
}
标签{
显示：内联块；
文本对齐：居中；
线高：1.5；
字体大小：粗体；
}
标签：第一个孩子{
文本对齐：左对齐；
}
标签：最后一个孩子{
文本对齐：右对齐；
}
.滑柱#滑柱a{
边框：1px实心#fff；
背景：#1b2a3d；
}

选择1
选择2
选择3


您的总金额为：0.00英镑
如果您注意到，我已将“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);
});

$（“#滑块”）.滑块(
{
价值：1，
分:0,，
最高：9，
步骤：1，
}
);
var valueMap=[0,1,2,3,4,5,8,10,15,20]；
变量项=['1
行'，'2
行'，'3
行'，'4
行'，'5
行'，'8
行'，'10
行'，'15
行'，'20+
行']；
var s=$（“#滑块”）；
s、 滑块({
民:1,，
max:items.length，
幻灯片：功能（事件、用户界面）{
$（“#total”）.text（“$”+（valueMap[ui.value]*$（'input[name=phone]：checked'）.val（））；
}
});
var oneBig=100/（项目长度-1）；
$。每个（项目、功能（键、值）{
var w=一个大的；
if（key==0 | | key==items.length-1）
w=1大/2；
$（“#图例”）。追加（“+value+”）；
});
//总和起点///////////////
$（“：radio”）。打开（“更改”，函数（）{
var合计=0；
$（“：radio:checked”）。每个（函数（）{
总数=数字（此.value）*valueMap[数字（$（“#滑块”）.slider（“值”））]；
});
$（“#总计”）。正文（总计）；
});
更新：您可以自定义滑块的值。还添加了计算总值的函数


let$slider=$（“#slider”），
$legend=$（“#legend”），
$total=$（“#total”），
总计=0，
行=[1,2,3,4,5,8,10,15,20]；
lines.forEach（（值，键）=>{
设oneBig=100/（lines.length-1）；
让宽度=（键===0 | |键===lines.length-1）？
oneBig/2:oneBig；
让text=（key！==lines.length-1）？
值+'
行：值+'+
行'；
let label=$（''）
.css（{'width'：width+'%}）
.html（文本）；
$legend.append（标签）；
});
$（“：radio”）。打开（“更改”，函数（）{
updateTotal（行[$slider.slider（“选项”、“值”）]）；
});
$slider.slider({
值：0，
分:0,，
最高：8，
步骤：1，
创建：（）=>{
updateTotal（行[$slider.slider（'value'）]）；
},
幻灯片：（事件，用户界面）=>{
updateTotal（行[ui.value]）；
}
});
函数updateTotal（值）{
总计=值*$（“输入[name='phone']：选中”）.val（）；
$total.text（total.toFixed（2））；
}
h3{
边缘顶部：10px；
}
#滑块标签{
位置：绝对位置；
宽度：20px；
左边距：-10px；
文本对齐：居中；
边缘顶部：20px；
}
#滑块{
宽度：100%；
保证金：1em自动；
}
.台词{
字体大小：10px；
}
标签{
显示：内联块；
文本对齐：居中；
线高：1.5；
字体大小：粗体；
}
标签：第一个孩子{
文本对齐：左对齐；
}
标签：最后一个孩子{
文本对齐：右对齐；
}
.滑柱#滑柱a{
边框：1px实心#fff；
背景：#1b2a3d；
}

选择1
选择2
选择3


您的总数是：£0.00
我想您应该根据滑块的移动来更新总数。如果是，您还需要为滑块附加onchange处理程序，然后乘以所选的收音机。您好，Anurag，谢谢您的建议。我仍然不确定如何基于滑块值进行乘法，因为我需要的增量不一致。请参阅更新的答案，其中包括通过收音机和滑块进行的更改。您好，Anurag，谢谢您，但这仍然不能满足滑块中的自定义值（即它不只是以1的增量递增。在5之后，增量值会跳升）我还是不明白。你能用你的样品中的一些数据，再详细解释一下吗？特别是在预期和显示的情况下，我可以看到滑块移动1步，即从0到9，一次移动1步。你想在滑块中有一些自定义值，比如1.5吗？基本上我要找的是自定义值。因此，无线电值乘以行数。例如，如果客户选择选项1和8条线路，则总数将为47.92英镑（5.99英镑x 8英镑）。到目前为止，这还不起作用，因为滑块每次只向上移动1。在第五步之后，该值会上升3，而不是1。滑块中的值需要是：1,2,3,4,5,8,10,15,20但是它们仍然需要定期停止以匹配标签I现在就知道了，我想你可以有一个地图，其中关键点是滑块值1..9，它是