首页猿问当我计算选中的框时，它会加上一个框

当我计算选中的框时，它会加上一个框

JavaScript

哆啦的时光机 2023-04-14 17:07:21

我的网络应用程序是关于体育比赛的预测。我的页面显示了所有比赛以及您可以从一场比赛的每个结果中获得的分数（马德里 = 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 回答

梵蒂冈之花

TA贡献1900条经验获得超5个赞

我会委托而不是使用内联事件处理程序

在这里我计算复选框 - 为什么你不想要选中的 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/>" ;

}

})

<h4 class="typopo">League 1</h4>

</div>

Some date

</h3>

<h3 class="typopo pl-2">Some string</h3>

</div>

</div>

<h3 class="tit">Some other team string</h3>

</div>

</div>

<h4 class="typopo">League 2</h4>

</div>

Some date

</h3>

<h3 class="typopo pl-2">Some string</h3>

</div>

</div>

<h3 class="tit">Some other team string</h3>

</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/>");

}

})

<h4 class="typopo">League 1</h4>

</div>

Some date

</h3>

<h3 class="typopo pl-2">Some string</h3>

</div>

</div>

<h3 class="tit">Some other team string</h3>

</div>

</div>

<h4 class="typopo">League 2</h4>

</div>

Some date

</h3>

<h3 class="typopo pl-2">Some string</h3>

</div>

</div>

<h3 class="tit">Some other team string</h3>

</div>

</div>

反对回复 2023-04-14

1 回答
0 关注
69 浏览

关注

添加回答

0/150

提交

取消

热搜

最近搜索清空

当我计算选中的框时，它会加上一个框

当我计算选中的框时，它会加上一个框

1 回答

添加回答