#javascript #jquery
#javascript #jquery
Вопрос:
Я пытаюсь найти более эффективный способ написания своего кода. У меня есть урок, на котором учащиеся могут перемещать ползунки, чтобы просмотреть эквивалентные дроби. Код можно найти в этом codepen . Я надеялся использовать только одну функцию, поэтому при изменении любого из трех ползунков фракция также изменится. Я уже пробовал,
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);
Однако значения в пузырьках не отображаются, а значения в дробях не обновляются. Я не уверен, что я делаю неправильно, и был бы признателен вам за помощь.
Комментарии:
1. Почему бы не использовать
thisin для ссылки на изменяемый элемент?2. Кроме того, вы видите какие-либо ошибки в консоли при тестировании своего кода?
3. Мои извинения. Я не получаю никаких ошибок в моем console.log. Я пытался использовать это, но я получаю нулевую или неопределенную ошибку.
Ответ №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 " amp;times; " inpObj.factor).appendTo(equation);
$("<span>").html("/").appendTo(equation);
$("<sub>").html(inpObj.denominator " amp;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">amp;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()
- getValues()
- writeEquation()
setBubble() принимает элемент диапазона и целевой пузырьковый элемент. Я подозреваю, что у вас будет один элемент bubble, но если у вас когда-нибудь будет больше в будущем, это можно перенести. Он соберет значение из диапазона и установит его в пузырь, а затем разместит пузырь на экране.
getValues() соберет значения из каждого из ползунков и поместит их в один объект, который имеет numerator denominator factor элементы и . Он не выполняет никакой проверки ошибок, он просто получает значения.
writeEquation() принимает объект, который должен содержать numerator , denominator factor и записывает уравнение в конкретный целевой объект jQuery. Он не выполняет никакой проверки ошибок.
Вы также увидите, что после того, как пользователь выбрал значение, мы выполняем проверки, чтобы увидеть, не вызовут ли они проблему. Если значения могут вызвать проблему, отображается сообщение об ошибке и функция завершается ( return false; ). В противном случае значения используются и записываются в виде уравнения.