jQuery一个代码多次单击

Question

我没有使用ID而不是类。 我有多个具有相似类的按钮，并且只有一个JQuery代码。

这是chessboardjs javascript代码。

对于两个不同的按钮，我面临的问题有所不同。

对于“重置”按钮，当我单击顶部按钮时，下部的嵌入也将被重置。 但是，反之亦然。

对于“显示答案”按钮，当我单击其中的任何一个按钮时，它对所有按钮同时起作用。

我想要的是，它们必须彼此独立地工作。

这是JQuery和HTML代码。

 <script>$(document).ready(function(){ $(".formButton").click(function(){ $(".answer_text").toggle(); }); });</script> 

 <center> <div id="board1" style="width: 450px"></div> <p><b>Kramnik vs Igor Saric, Leningrad, 1991<br>(White to move)</b></p> <input type="button" class="anyButton setPosition" value="Reset" /> <button type="button" class="anyButton formButton">Show Answer!</button>&nbsp;<span class="description answer_text">Qxf6+ w/Rxe6+</span> </center> <script> var cfg = { position: '2r5/pp3k2/2q1br1p/3pQ3/3P2P1/1P2R3/P7/1B2R1K1 w - -', draggable:true }; var board1 = ChessBoard('board1', cfg); $('.setPosition').on('click', function() { var inPosition = '2r5/pp3k2/2q1br1p/3pQ3/3P2P1/1P2R3/P7/1B2R1K1 w - -'; board1.position(inPosition); }); </script> &nbsp; <center> <div id="board2" style="width: 450px"></div> <p><b>Grischuk vs Andrey Lunev, Moscow, 1999<br>(White to move)</b></p> <input type="button" class="anyButton setPosition" value="Reset" /> <button type="button" class="anyButton formButton">Show Answer!</button>&nbsp;<span class="description answer_text">Ne5+ Kh4 Qh6+ Kg3 Qxg5+ & Nd3+</span> </center> <script> var cfg = { position: '8/p4p2/3RbQ2/2q3p1/4P1k1/P4N2/2r5/7K w - - 0 1', draggable:true }; var board2 = ChessBoard('board2', cfg); $('.setPosition').on('click', function() { var inPosition = '8/p4p2/3RbQ2/2q3p1/4P1k1/P4N2/2r5/7K w - - 0 1'; board2.position(inPosition); }); </script> 

谁能帮帮我吗？

谢谢。

Answer 1

我认为原因是因为在两块板上的JS代码中使用了相同的变量，我的意思是var“ inPosition” ....与变量相同，这就是为什么当您单击“重置”时，您将相同的位置设置为他们两个..尝试将第二个板的var更改为“ inPosition2”

Answer 2

您还有其他问题，我建议您解决，但要回答您的直接问题，应该这样做。

如果单击显示答案按钮，则仅显示与按钮同级的答案。

这是在代码段中更改的特定代码：

$(document).ready(function() {
  $(".formButton").click(function() {
    $(this).siblings(".answer_text").toggle();
  });
});

完整的摘要：

 $(document).ready(function() { $(".formButton").click(function() { $(this).siblings(".answer_text").toggle(); }); }); //Your other scripts var cfg = [{ position: '2r5/pp3k2/2q1br1p/3pQ3/3P2P1/1P2R3/P7/1B2R1K1 w - -', draggable: true }, { position: '8/p4p2/3RbQ2/2q3p1/4P1k1/P4N2/2r5/7K w - - 0 1', draggable: true } ]; var board1 = ChessBoard('board1', cfg[0]); var board2 = ChessBoard('board2', cfg[1]); $('.setPosition').on('click', function() { var inPosition = ['2r5/pp3k2/2q1br1p/3pQ3/3P2P1/1P2R3/P7/1B2R1K1 w - -', '8/p4p2/3RbQ2/2q3p1/4P1k1/P4N2/2r5/7K w - - 0 1']; //New Code to avoid "Position Undefined" error in Snippet if (typeof page_name != 'undefined') { //Original StandAlone Code board1.position(inPosition[0]); board2.position(inPosition[1]); //Note: Not sure if this error is happen because the full "ChessBoard" function is not avalible or if there is a typo/misstake in your coding. I implemented an error check here so the snippet doesnt bug out. } else { alert('Cannot retrieve "position" of undefined variable.'); } }); //Avoid "ChessBoard();" Error in Snippet function ChessBoard(BoardID, cfgCode) { var returnResults = document.getElementById('returnResults'); returnResults.innerHTML += '<table><tr><th>BoardID</th><th>cfgCode</th></tr><tr><td>' + BoardID + '</td><td>' + cfgCode.position + '</td></tr></table>' } //More Testing document.getElementById('test1').innerHTML = board1; document.getElementById('test2').innerHTML = board2; 

 .board { width: 450px; } /* For Testing only (These can be deleted for final product, dont forget to delete the classes within the HTML file) */ .box { border: 1px solid #ddd; padding: 15px; margin-bottom: 10px; } .pt-1 { padding-top: 10px; } .responsive-table { overflow-x: auto; } table { border-collapse: collapse; border-spacing: 0; width: 100%; border: 1px solid #ddd; margin-bottom: 10px; } th, td { text-align: left; padding: 8px; } tr:nth-child(even) { background-color: #f2f2f2 } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <center class="box"> <div id="board1" class="board"></div> <p><b>Kramnik vs Igor Saric, Leningrad, 1991<br>(White to move)</b></p> <input type="button" class="anyButton setPosition" value="Reset" /> <button type="button" class="anyButton formButton">Show Answer!</button> <span class="description answer_text">Qxf6+ w/Rxe6+</span> </center> <center class="box"> <div id="board2" class="board"></div> <p><b>Grischuk vs Andrey Lunev, Moscow, 1999<br>(White to move)</b></p> <input type="button" class="anyButton setPosition" value="Reset" /> <button type="button" class="anyButton formButton">Show Answer!</button> <span class="description answer_text">Ne5+ Kh4 Qh6+ Kg3 Qxg5+ & Nd3+</span> </center> <!-- For Testing Only --> <div id="Testing" class="box"> <h3>"ChessBoard" Results:</h3> <div id="returnResults" class="responsive-table"></div> <h3>Variable Results:</h3> <div><b>Variable "board1" Returned: </b><span id="test1"></span></div> <div class="pt-1"><b>Variable "board2" Returned: </b><span id="test2"></span></div> </div>