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

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 后(始终为 true)，else if 也无法命中。您需要为 if 语句使用不同的值，例如 $('#textbox').val()

例如:

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

这是我的 fiddle fork :http://jsfiddle.net/hpv1oyaL/