Question

我在编码方面很新，我的数学老师给了我一个国际象棋问题，我想用javascript来生成所有可能的解决方案。

问题是：在5x5国际象棋棋盘上只使用5个皇后并放置它们，因此只有3个区域未被攻击

现在我被卡住了，因为我的JQuery不起作用。

你可以在这里查看代码：http://jsfiddle.net/hjespshw/1/ 或

HTML：

<h2>TextBox value : <label id="msg"></label></h2>
<input id="textbox" value="1" />
<button id="Get">Click</button>

<table>
  <tr>
    <td id="1"></td>
    <td id="2"></td>
    <td id="3"></td>
    <td id="4"></td>
    <td id="5"></td>

  </tr>
  <tr>
    <td id="6"></td>
    <td id="7"></td>
    <td id="8"></td>
    <td id="9"></td>
    <td id="10"></td>

  </tr>
  <tr>
    <td id="11"></td>
    <td id="12"></td>
    <td id="13"></td>
    <td id="14"></td>
    <td id="15"></td>

  </tr>
  <tr>
    <td id="16"></td>
    <td id="17"></td>
    <td id="18"></td>
    <td id="19"></td>
    <td id="20"></td>

  </tr>
  <tr>
    <td id="21"></td>
    <td id="22"></td>
    <td id="23"></td>
    <td id="24"></td>
    <td id="25"></td>

  </tr>


</table>

Javascript：

$("#Get").click(function() {
  var bla = $('#textbox').val();
  bla = '#' + bla;
  $('#msg').html($('#textbox').val());
  $(bla).text("X");

  $( "td:contains('X')" ).css( "background-color", "red" );
  if ($( "td:contains('X')" )) {
        // for every td containing x make adjecent ones turn red
    if ($("#1:contains('X')")) {
        $("#2").css( "background-color", "red" );
      $("#3").css( "background-color", "red" );
      $("#4").css( "background-color", "red" );
      $("#5").css( "background-color", "red" );
      $("#6").css( "background-color", "red" );
      $("#7").css( "background-color", "red" );
      $("#11").css( "background-color", "red" );
      $("#13").css( "background-color", "red" );
      $("#16").css( "background-color", "red" );
      $("#19").css( "background-color", "red" );
      $("#21").css( "background-color", "red" );
      $("#25").css( "background-color", "red" );
    } else if ($("#2:contains('X')")) {
        $("#1").css( "background-color", "blue" );
      $("#2").css( "background-color", "blue" );
      $("#3").css( "background-color", "blue" );
      $("#4").css( "background-color", "blue" );
      $("#5").css( "background-color", "blue" );
      $("#7").css( "background-color", "blue" );
      $("#8").css( "background-color", "blue" );
      $("#12").css( "background-color", "blue" );
      $("#14").css( "background-color", "blue" );
      $("#17").css( "background-color", "blue" );
      $("#20").css( "background-color", "blue" );
      $("#22").css( "background-color", "blue" );
    }

    }
});

CSS：

table {
  margin-top: 10px;
}

table tr td {
  width: 40px;
  height: 40px;
  border: solid blue 3px;
}

td {
  text-align: center;
}

当你输入1并单击按钮时，所有工作都有效，但当你输入2时，它就像你输入1一样。

如果我删除

if ($("#1:contains('X')")) {
    $("#2").css( "background-color", "red" );
  $("#3").css( "background-color", "red" );
  $("#4").css( "background-color", "red" );
  $("#5").css( "background-color", "red" );
  $("#6").css( "background-color", "red" );
  $("#7").css( "background-color", "red" );
  $("#11").css( "background-color", "red" );
  $("#13").css( "background-color", "red" );
  $("#16").css( "background-color", "red" );
  $("#19").css( "background-color", "red" );
  $("#21").css( "background-color", "red" );
  $("#25").css( "background-color", "red" );
} else

然后，当你输入2时，它应该如何

感谢您的帮助！

Answer 1

您的代码一直停在1的原因是因为您的if结构为

if () {}
else if () {}

点击第一个if后（始终为真），else if也不会被点击。您需要为if语句使用不同的值，例如$('#textbox').val()

例如：

if ($('#textbox').val() == 1) { /* one positions */ }
else if ($('#textbox').val() == 2) { /* two positions */ }

这是我的小提琴：http://jsfiddle.net/hpv1oyaL/

Jquery，如果ID包含字母'X'

1 个答案: