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” ....与变量相同，这就是为什么当您单击“ Reset”时要设置他们两个的位置都相同。...尝试将第二个板的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>

jQuery一个代码多次单击

2 个答案: