单击多个 div 时如何执行操作？ (Javascript)

Question

我会试着解释一下：我有很多 div 用作按钮（当你点击它时它们会变成红色）。 这是一个排名系统（用于电子游戏）。 每个等级有三个步骤（1-2-3）。 这样做的目标是，您可以先 select 您的排名，然后是 select 所需的排名。 选择此项后，将显示价格。 我试图这样做 function。 例如，您的 select 可能排名最低，然后您的着陆 (1-2-3)。 然后，您选择您想要的排名，因此总共点击了 4 个 div。 最后，这一切的目标是显示价格。 但我遇到了麻烦。 如果大家有什么想法。

我知道这不是做到这一点的好方法。 下面的代码是一个示例（Silver 1 到 Silver 2）。

我确信我可以浓缩这个，但我不知道如何（因为有很多等级，我认为做 50 个函数不是一个好主意）。 我希望已经清楚和准确，感谢您的帮助。

 //First part var fer1 = 0; var bronze1 = 0; var argent1 = 0; var or1 = 0; var platine1 = 0; var diamant1 = 0; var immortel1 = 0; var un1 = 0; var deux1 = 0; var trois1 = 0; //Second part var fer2 = 0; var bronze2 = 0; var argent2 = 0; var or2 = 0; var platine2 = 0; var diamant2 = 0; var immortel2 = 0; var un2 = 0; var deux2 = 0; var trois2 = 0; function P1() { fer1 = 1; bronze1 = 0; argent1 = 0; or1 = 0; platine1 = 0; diamant1 = 0; immortel1 = 0; if ((fer1 == 1 && fer2 == 1 && un1 == 1 && deux2 == 1)) { document.getElementById('total').innerHTML = "100€" } else { document.getElementById('total').innerHTML = "0€" } } function P8() { un1 = 1; deux1 = 0; trois1 = 0; if ((fer1 == 1 && fer2 == 1 && un1 == 1 && deux2 == 1)) { document.getElementById('total').innerHTML = "100€" } else { document.getElementById('total').innerHTML = "0€" } } function P11() { fer2 = 1; bronze2 = 0; argent2 = 0; or2 = 0; platine2 = 0; diamant2 = 0; immortel2 = 0; if ((fer1 == 1 && fer2 == 1 && un1 == 1 && deux2 == 1)) { document.getElementById('total').innerHTML = "100€" } else { document.getElementById('total').innerHTML = "0€" } } function P99() { un2 = 0; deux2 = 1; trois2 = 0; if ((fer1 == 1 && fer2 == 1 && un1 == 1 && deux2 == 1)) { document.getElementById('total').innerHTML = "100€" } else { document.getElementById('total').innerHTML = "0€" } }

HTML：

 <div class="selection2"> <h1 class="unselectable policeOA policeRS" style="background-color:black; color:white;"> VOTRE RANG SOUHAITÉ</h1> <div class="SousSelection1"> <div class="contenu-grille"> <div class="foc"> <div class="PetitCarre customClass" id="pc11"> <img class="rankss unselectable" src="http://localhost:8080/fullvaloAZ\FullValoCreated\HTML\esports\build\assets\images\Rank\Silver.png"/> <img id="s1" class="unselectable slash1" src="http://localhost:8080/fullvaloAZ\FullValoCreated\HTML\esports\build\assets\images\All\Slashwhite.png"/> </div> </div> <div class="foc"> <div class="PetitCarre" id="pc22"> <img class="rankss unselectable" src="http://localhost:8080/fullvaloAZ\FullValoCreated\HTML\esports\build\assets\images\Rank\Bronze.png"/> <img id="s2" class="unselectable slash2" src="http://localhost:8080/fullvaloAZ\FullValoCreated\HTML\esports\build\assets\images\All\Slashwhite.png"/> </div> </div> <div class="foc"> <div class="PetitCarre" id="pc33"> <img class="rankss unselectable" src="http://localhost:8080/fullvaloAZ\FullValoCreated\HTML\esports\build\assets\images\Rank\Argent.png"/> <img id="s3" class="unselectable slash3" src="http://localhost:8080/fullvaloAZ\FullValoCreated\HTML\esports\build\assets\images\All\Slashwhite.png"/> </div>

Answer 1

我认为你应该给 div 相同的 class 名称 select 使用 querySelectorAll 然后在它们上创建 forEach 循环在事件检查中为它们添加点击事件侦听器为当前排名和 div 排名然后返回所需的价格也使用 fer1 fer2使用 [fer1,fer2] 会好很多。 如果你能提供 html 也许我可以提供更多帮助