使用 jquery 监听多个滑块的变化

Question

我正在尝试找到一种更有效的方式来编写我的代码。 我有一堂课，学生可以移动滑块来查看等效分数。 代码可以在这个codepen上找到。 我希望只使用一个 function 所以当三个滑块中的任何一个被改变时，分数也会改变。 我努力了，

const ranges = document.querySelectorAll(".range");

console.log("#"+ranges[0].id)

$("#"+ranges[0].id, "#"+ranges[1].id, "#"+ranges[2].id).change(function () {

    console.log (ranges)
    console.log (ranges[0].value)
    console.log (ranges[0].id + "Bubbles")
        
    setBubble(ranges[0].value * 1, ranges[0].id + "Bubble");
    equivalentFraction (ranges[0].value, ranges[1].value, ranges[2].value);

});

setBubble(range, rangeBubble);
equivalentFraction (ranges[0].value, ranges[1].value, ranges[2].value);

但是，气泡中的值不会显示，并且分数中的值不会更新。 我不确定我做错了什么，并感谢您的帮助。

Answer 1

考虑以下。

 $(function() { function setBubble(rangeEl, bubbleEl) { var val = parseInt(rangeEl.value); var min = rangeEl.min? parseInt(rangeEl.min): 0; var max = rangeEl.max? parseInt(rangeEl.max): 100; var result = ((val - min) * 100) / (max - min); $(bubbleEl).html(rangeEl.value).css("left", "calc(" + result + "% + " + ((8 - result) * 0.15) + "px)"); } function writeEquation(inpObj, targetObj) { targetObj.html(""); var equation = $("<span>", { class: "frac" }).appendTo(targetObj); $("<sup>").html(inpObj.numerator + " &times; " + inpObj.factor).appendTo(equation); $("<span>").html("/").appendTo(equation); $("<sub>").html(inpObj.denominator + " &times; " + inpObj.factor).appendTo(equation); $("<span>", { class: "eq" }).html("=").appendTo(targetObj); var result = $("<span>", { class: "frac" }).appendTo(targetObj); $("<sup>").html(inpObj.numerator * inpObj.factor).appendTo(result); $("<span>").html("/").appendTo(result); $("<sub>").html(inpObj.denominator * inpObj.factor).appendTo(result); } function getValues() { return { numerator: parseInt($("#numeratorEquivalentSlider").val()), denominator: parseInt($("#denominatorEquivalentSlider").val()), factor: parseInt($("#equivalentSlider").val()) }; } $("div[class*='EquivalentFractionSlider']").each(function(index, elem) { setBubble($(".range", elem).get(0), $(".bubble", elem).get(0)); }); $(".range").on("input", function() { setBubble($(this).get(0), $(this).parent().find(".bubble").get(0)); }).change(function() { var inp = getValues(); if (inp.denominator == 0) { $("#equivalentErrorStatement").html("Sorry, Denominator cannot be 0.").addClass("errorComment"); return false; } if (inp.factor == 0) { $("#equivalentErrorStatement").html("Sorry, Factor cannot be 0. This would cause Denominitor to be 0.").addClass("errorComment"); return false; } writeEquation(inp, $("#equivalentFractionStatement")); }); });

 .bubble { background: red; color: white; padding: 4px 12px; margin: 0 auto 3rem; position: absolute; border-radius: 4px; transform: translate(-50%, 70%) }.bubble::after { content: ""; position: absolute; width: 2px; height: 2px; background: red; top: -1px; left: 50%; }.emphasisBox { border-radius: 25px; border: 5px solid hsl(245, 98%, 19%); background-color: hsl(210, 86%, 86%); border-width: 5px; box-shadow: 5px 10px hsl(205, 48%, 69%); padding: 3rem; } /* the following rules are used to write fractions */ span.frac { display: inline-block; text-align: center; } span.frac>sup { display: block; border-bottom: 1px solid; font: inherit; } span.frac>span { display: none; } span.frac>sub { display: block; font: inherit; } span.eq { vertical-align: 16px; padding: .25em; }

 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous"> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="container"> <div class="row justify-content-center mt-3"> <div class="col-8 col-md-5"> <div class="row justify-content-center"> <div class="col-10 col-md-6">Numerator</div> <div class="col-10 col-md-4"> <div class="numeratorEquivalentFractionSlider"> <input id="numeratorEquivalentSlider" type="range" class="range" min="-20" value="10" max="20"> <output id="numeratorEquivalentBubble" class="bubble"></output> </div> </div> </div> </div> <div class="col-8 col-md-5"> <div class="row justify-content-center"> <div class="col-10 col-md-7">Denominator</div> <div class="col-10 col-md-4"> <div class="denominatorEquivalentFractionSlider"> <input id="denominatorEquivalentSlider" type="range" class="range" min="-20" value="2" max="20"> <output id="denominatorEquivalentBubble" class="bubble"></output> </div> </div> </div> </div> </div> <div class="row justify-content-center mt-3"> <div class="col-8 col-md-5"> <div class="row justify-content-center"> <div class="col-10 col-md-4">Factor</div> <div class="col-10 col-md-4"> <div class="EquivalentFractionSlider"> <input id="equivalentSlider" type="range" class="range" min="-20" value="5" max="20"> <output id="equivalentBubble" class="bubble"></output> </div> </div> </div> </div> </div> <div class="row justify-content-center align-items-center"> <;-- blank row to create space between card and banner --> <section class="col">&nbsp;</section> </div> <div class="row justify-content-center text-center"> <div id="equivalentErrorStatement" class="col-10 col-6"></div> </div> <div class="row justify-content-center my-3 text-center"> <div id="equivalentFractionStatement" class="col-8 col-md-4 emphasisBox"></div> </div> </div>

我已经提出了一个 jQuery 答案，因为我尽量不混合。 您可以在这里看到，我设置了更多功能：

• 设置气泡（）
• 获取值（）
• 写方程（）

setBubble()接受范围元素和目标气泡元素。 我怀疑您将拥有一个气泡元素，但是如果您将来有更多，则可以继续使用。 它将收集范围中的值并将其设置在气泡中，然后 position 在屏幕上的气泡中。

getValues()将收集每个滑块的值并将它们放入具有numerator 、 denominator和factor元素的单个 Object 中。 它不做任何错误检查，它只是获取值。

writeEquation()接受 Object 应包含numerator 、 denominator和factor ，并将方程写入特定目标 jQuery Object。 它不执行任何错误检查。

您还将看到，一旦用户选择了一个值，我们就会执行检查以查看这些是否会导致问题。 如果这些值会导致问题，则会显示错误并退出 function ( return false; )。 否则，将使用这些值并将其作为等式写出。