Question

我想检查innerHtml是否有X或O，所以我不能再添加任何其他东西，但它不起作用。它在添加检查代码后停止，我正在尝试做一个简单的X O游戏，以便更熟悉javascript和jquery。

我也不确定是否能用jQuery做到这一点。

<script type="text/javascript" >

    function ranFun() {
       return Math.floor((Math.random() * 9) + 1);
   }

   var a;

     function Elment(a) {         
         document.getElementById("td" + a).innerHTML = "O";
     }    

     function call() {
            var x = ranFun();
         switch (x) {
             case 1:case 2 :case 3: case 4 :case 5 : case 6 : case 7 : case 8 : case 9 :
                 Elment(x);
                 break;
             default:
                 break;
         }
     }

     function tdElm(c) {

         if ($('#td1').text() === "x" || $('#td1').text() == "o")
             return false;
         else {
             document.getElementById("td" + c).innerHTML = "x";
             call();
         }

   }

</script>

<BODY>

<center>
<h1 >"        X ,O Game    "</h1>
<table >
    <tr>
       <td id="td1"  onclick="tdElm(1);" ></td>
       <td id="td2" onclick="tdElm(2);"></td>
       <td id="td3" onclick="tdElm(3);"></td>
    </tr>

    <tr>
       <td id="td4" onclick="tdElm(4);"></td>
       <td id="td5" onclick="tdElm(5);"></td>
       <td id="td6" onclick="tdElm(6);"></td>
    </tr>

    <tr>
       <td id="td7" onclick="tdElm(7);"></td>
       <td id="td8" onclick="tdElm(8);"></td>
       <td id="td9" onclick="tdElm(9);"></td>
    </tr>
</table>
</center>

</BODY>

Answer 1

有效

var c = 1;
$('#td'+c).text()

如果要设置元素的文本必须使用

$('#td'+c).text("x")

带有字符串参数的文本方法 http://api.jquery.com/text/

Answer 2

您不必同时检查文本是否等于x或不等于o，而另一个则使另一个超文本。

使用jQUery设置元素的文本时，在text的调用中提供值，不要将其赋值给函数的返回值。

我假设您在检查值时也想使用c参数。

function tdElm(c) {
  if ($('#td' + c).text() == "o") {
    $('#td' + c).text("x");
  }
}

Answer 3

就JavaScript语法而言，这两件事并没有什么不同：

document.getElementById("td" + c);
$('#td'+c)

在这两种情况下，您接受一个字符串，将新值附加到该字符串，然后将结果作为参数传递给函数。因此，任何接受'#td1'字符串的地方都允许接受'#td' + c的形式。这不是关于jQuery的，只是简单的javascript。

至于此：

$('#td'+c).text() === "x" ;

这应该有用，但我相信你的问题是空白。文本周围可能有一些空格，使其不等于"x"。 jQuery提供了一个$.trim()函数来修剪这些情况的空白。

if ($.trim($('#td'+c).text()) === "x") {

或者也许使用正则表达式？

if (/x/.test($('#td'+c).text())) {

Answer 4

您的代码很难阅读。我已经为你准备了一个快速的工作脚本来阅读和理解http://jsfiddle.net/mendesjuan/MQ9Nr/

但是，似乎对于您需要的内容，您只需检查文本是否为空。以下是一些建议

不要设置HTML处理程序
不需要将数字传递给处理程序，处理程序知道点击了什么td

<强> JS

$(function(){
  var turn = 0;
  var xos = ["x", "o"];
  $("td").click(function(){
    var $this = $(this);
      if ($this.text()) {
        return;
      } else {
        $this.text(xos[turn]);
        turn = (turn + 1) % 2;
      }
  });
});

<强> HTML

<h1 >X ,O Game</h1>
<table >
    <tr>
       <td id="td1"></td>
       <td id="td2"></td>
       <td id="td3"></td>
    </tr>    
    <tr>
       <td id="td4"></td>
       <td id="td5"></td>
       <td id="td6"></td>
    </tr>
    <tr>
       <td id="td7"></td>
       <td id="td8"></td>
       <td id="td9"></td>
    </tr>
</table>

Answer 5

您的代码存在很多问题，

我建议你看一下这个快速的黑客，我把它放在一起工作，随时提问。

http://jsfiddle.net/blowsie/TKq2H/4/

function call() {
    var x = Math.floor((Math.random() * 9) + 1);
    if ($('#td' + x).text() === "x" || $('#td' + x).text() == "o") {
        call();
    }
    else {
        $("#td" + x).text("o");
    }

}
$('td').click(function() {
    var no = $(this).data('no')
    if ($('#td' + no).text() === "x" || $('#td' + no).text() == "o") return false;
    else {
        $("#td" + no).text("x");
        call();
    }
});


<center>
<h1 >"        X ,O Game    "</h1>
<table >
    <tr>
       <td id="td1"  data-no="1" ></td>
       <td id="td2" data-no="2"></td>
       <td id="td3" data-no="3"></td>
    </tr>

    <tr>
       <td id="td4" data-no="4"></td>
       <td id="td5" data-no="5"></td>
       <td id="td6" data-no="6"></td>
    </tr>

    <tr>
       <td id="td7" data-no="7"></td>
       <td id="td8" data-no="8"></td>
       <td id="td9" data-no="9"></td>
    </tr>
</table>
</center>

我想检查$（'＃td1'）。text（）===“x”？

5 个答案: