使用 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; )。 否則，將使用這些值並將其作為等式寫出。