当我计算选中的框时，它会加上一个框
我的网络应用程序是关于体育比赛的预测。我的页面显示了所有比赛以及您可以从一场比赛的每个结果中获得的分数（马德里 = 12 分 VS 巴塞罗那 = 15 分）。因此，用户在匹配项中选中一个框并为他选择正确的结果。我希望每次用户选中一个框时，向他显示他选中的框数。
这是我的 Javascript 来计算选中的框：
const updateCount = function() {
var x = document.querySelectorAll(".square:checked").length;
document.querySelector(".plus").innerHTML = x;
};
这是将显示选中框数量的 HTML
<div class=" d-flex pt-2">
<h3 class="typos">Matchs pronostiqués</h3>
<h3 class="typos pts" style="font-weight: bold; padding-left: 5px;"><%= current_user.forecasts.where(confirmed: true, season_id: Season.last.id).count %>/50</h3>
<span class="plus"></span>
</div>
这是我的 Javascript，以便了解用户预测的游戏以及他选择的结果：
const selectOutcome = () => {
const selects = document.querySelectorAll(".square");
selects.forEach((outcome)=>{
outcome.addEventListener("click",(event) => {
$('input[type="checkbox"]').on('change', function() {
$(this).siblings('input[type="checkbox"]').not(this).prop('checked', false);
});
const result = event.currentTarget.dataset.outcome;
console.log(result);
const id = event.currentTarget.parentNode.dataset.id;
console.log(id);
const box = event.currentTarget.checked;
console.log(box);
const url = 'store_outcome?result='+result+'&match='+id+'&box='+box
fetch(url)
.then(response => response.json())
.then((data) => {
console.log(data);
});
});
});
}
const validePanier = () => {
const panier = document.getElementById('panier');
panier.addEventListener("click", (event) =>{
console.log("click")
const player = document.getElementById('season_player').value;
fetch('confirm_pending?player='+player)
.then(response => response.json())
.then((data) => {
console.log(data);
});
})
}
有一个数据ID。目的是当用户选中一个框时，我可以获得匹配的 ID，以便为正确的游戏创建正确的预测。
哆啦的时光机1回答
-
梵蒂冈之花
我会委托而不是使用内联事件处理程序在这里我计算复选框 - 为什么你不想要选中的 RADIO 的值？注意我把所有的火柴都包裹在<div id="matches">...</div>document.getElementById("matches").addEventListener("change", function(e) { const tgt = e.target; if (tgt.classList.contains("square")) { const parent = tgt.closest(".displaysquares"); var x = parent.querySelectorAll(".square:checked").length; document.querySelector(".plus").innerHTML += parent.dataset.id + ": " + x +"<br/>" ; }})<span class="plus"></span><div id="matches"> <div class="d-flex justify-content-center mb-2 mt-2"> <h4 class="typopo">League 1</h4> </div> <div class="d-flex justify-content-center mb-2 mt-2"> <h3 class="tit"> Some date </h3> <h3 class="typopo pl-2">-</h3> <h3 class="typopo pl-2">Some string</h3> </div> <div class="d-flex flex-row justify-content-around mb-4 mt-4" data-id="MATCH 1"> <div class="d-flex flex-column align-items-center col-4"> <div class="row"> <h3 class="typopo">TEAM LOGO </h3> </div> <div class="row text-align-center"> <h3 class="tit">Some other team string</h3> </div> </div> <div class="d-flex flex-column justify-content-center"> <p class="typopo text-center">VS</p> <div class="d-flex flex-row align-items-center col-4"> <div class="displaysquares" data-id="MATCH 1"> <input type="checkbox" class="square" data-outcome="1"> <input type="checkbox" class="square" data-outcome="NULL"> <input type="checkbox" class="square" data-outcome="2"> </div> </div> </div> </div> <div class="d-flex justify-content-center mb-2 mt-2"> <h4 class="typopo">League 2</h4> </div> <div class="d-flex justify-content-center mb-2 mt-2"> <h3 class="tit"> Some date </h3> <h3 class="typopo pl-2">-</h3> <h3 class="typopo pl-2">Some string</h3> </div> <div class="d-flex flex-row justify-content-around mb-4 mt-4" data-id="MATCH 2"> <div class="d-flex flex-column align-items-center col-4"> <div class="row"> <h3 class="typopo">TEAM LOGO </h3> </div> <div class="row text-align-center"> <h3 class="tit">Some other team string</h3> </div> </div> <div class="d-flex flex-column justify-content-center"> <p class="typopo text-center">VS</p> <div class="d-flex flex-row align-items-center col-4"> <div class="displaysquares" data-id="MATCH 2"> <input type="checkbox" class="square" data-outcome="1"> <input type="checkbox" class="square" data-outcome="NULL"> <input type="checkbox" class="square" data-outcome="2"> </div> </div> </div> </div></div>改用收音机const matches = document.getElementById("matches")matches.addEventListener("change", function(e) { const tgt = e.target; if (tgt.classList.contains("square")) { var x = [...matches.querySelectorAll(".square:checked")].map(chk => chk.closest(".displaysquares").dataset.id + ": "+chk.dataset.outcome) document.querySelector(".plus").innerHTML = x.join("<br/>"); }})<span class="plus"></span><div id="matches"> <div class="d-flex justify-content-center mb-2 mt-2"> <h4 class="typopo">League 1</h4> </div> <div class="d-flex justify-content-center mb-2 mt-2"> <h3 class="tit"> Some date </h3> <h3 class="typopo pl-2">-</h3> <h3 class="typopo pl-2">Some string</h3> </div> <div class="d-flex flex-row justify-content-around mb-4 mt-4" data-id="MATCH 1"> <div class="d-flex flex-column align-items-center col-4"> <div class="row"> <h3 class="typopo">TEAM LOGO </h3> </div> <div class="row text-align-center"> <h3 class="tit">Some other team string</h3> </div> </div> <div class="d-flex flex-column justify-content-center"> <p class="typopo text-center">VS</p> <div class="d-flex flex-row align-items-center col-4"> <div class="displaysquares" data-id="MATCH 1"> <input type="radio" name="outcome1" class="square" data-outcome="1"> <input type="radio" name="outcome1" class="square" data-outcome="NULL"> <input type="radio" name="outcome1" class="square" data-outcome="2"> </div> </div> </div> </div> <div class="d-flex justify-content-center mb-2 mt-2"> <h4 class="typopo">League 2</h4> </div> <div class="d-flex justify-content-center mb-2 mt-2"> <h3 class="tit"> Some date </h3> <h3 class="typopo pl-2">-</h3> <h3 class="typopo pl-2">Some string</h3> </div> <div class="d-flex flex-row justify-content-around mb-4 mt-4" data-id="MATCH 2"> <div class="d-flex flex-column align-items-center col-4"> <div class="row"> <h3 class="typopo">TEAM LOGO </h3> </div> <div class="row text-align-center"> <h3 class="tit">Some other team string</h3> </div> </div> <div class="d-flex flex-column justify-content-center"> <p class="typopo text-center">VS</p> <div class="d-flex flex-row align-items-center col-4"> <div class="displaysquares" data-id="MATCH 2"> <input type="radio" name="outcome2" class="square" data-outcome="1"> <input type="radio" name="outcome2" class="square" data-outcome="NULL"> <input type="radio" name="outcome2" class="square" data-outcome="2"> </div> </div> </div> </div></div>
随时随地看视频慕课网APP
相关分类
JavaScript