Question

我正在尝试编写一个jQuery if语句，它有两个条件我想确保变量square不等于“theImg”并且它不是空白。由于某种原因，它仍然通过并在数组中添加一个空白条目。有人能告诉我这里我做错了什么。

    <!DOCTYPE html>
<html>
    <head>
        <title>Boom</title>
        <link rel="stylesheet" type="text/css" href="css/style.css" />
        <script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
        <script type="text/javascript" src="include/javascript.js"></script>
        <script src="//code.jquery.com/jquery-migrate-1.2.1.min.js" ></script>
    </head>

<body>

<div id="wrapper">
    <div id="container">
        <div id="board">
            <script>CreateBoard()</script>
            <script>
                $( ".boardSquares" ).click(function( event ) {
                var square = event.target.id;
                var squaresClicked = [];
                    if(square != "theImg") {
                    squaresClicked.push(square);
                    }
                    $( "#log" ).html( "clicked: " + square );
                    $('#' + square).prepend('<img id="theImg" src="images/X.png" />')

                $("body").dblclick(function() {
                    console.log(squaresClicked);
                }) 
                });
            </script>
        </div>
    </div>
</div>
<div id="log"></div>

</body>

</html>

javascript.js：

function CreateBoard(){
    for(x=1; x<=9;x++) {
        var board = document.createElement('div');
            board.className = "boardSquares";
            board.id = x;
        document.getElementById('board').appendChild(board);
    }
}

更新我在这里添加了所有代码并实现了一些我没有解释的东西。我的代码在屏幕上生成9个方块，每个方块都有一个唯一的id。只要其中一个单击它，它就会检索单击该div的id并将其添加到squaresClicked数组，然后它将在div中添加一个图像，其中id为theImg这就是我测试的原因，因为如果我点击两次相同的div，它会将值theImg添加到数组中。使用我现在的代码，数组中添加了空白条目，这就是我测试null的原因。删除第二个条件后，仍然会向数组中添加空白条目，就像忽略if语句一样。

Answer 1

DEMO

为动态创建的元素

委派！

^{（+阅读你Q的所有评论。）}

$("#board").on('click', '.boardSquares', function( event ) {

^{About .on() method}

另外，在<script>文档的中间添加一个HTML标签不是一个好主意，为了更好的阅读，SEO和所有其他错误/性能的东西，如果可能的话，将JS放在</body>代码。

HTML：

<div id="wrapper">
    <div id="container">
        <div id="board"></div>
    </div>
</div>
<div id="log"></div>

JS：

$(function(){ // DOM ready

    var squares = ""; // HTML

    function createBoard(){
       for(x=1; x<=9; x++){
         squares += "<div id='"+ x +"' class='boardSquares'>SQ</div>";
       }
       $('#board').append(squares);
    } 
    createBoard();

  $("#board").on("click", ".boardSquares:not('.clicked')", function( event ) {
      $(this).addClass('clicked');
      var squaresClicked = [];
      var square = event.target.id;
      squaresClicked.push(square);
      $( "#log" ).html( "clicked: " + square );
      $(this).prepend('<img src="http://placehold.it/30x30/cf5" />');

      $("body").dblclick(function() {
          console.log(squaresClicked);
      });
    }); 

});

Answer 2

您可能想检查square是否有值（不为null）。

if(square && square != "theImg" && square != '') {
    squaresClicked.push(square);
}

Answer 3

我可以看到的一种可能性是方形是非空的它像[space]一样空白所以试试

if(square != "theImg" && $.trim(square) != '')

Answer 4

标准相等运算符（==和！=）比较两个操作数而不考虑它们的类型。严格相等运算符（===和！==）对相同类型的操作数执行相等比较。如果操作数必须是特定类型以及值，或者操作数的确切类型很重要，请使用严格相等运算符。否则，使用标准相等运算符，它允许您比较两个操作数的标识，即使它们的类型不同。

http://indersingh.com/javascript-and-jquery/jquery-comparison-operators

我找到了这个让你尝试，我认为你也应该尝试常规的表现我总是在我的代码中使用验证。

http://www.jquery4u.com/syntax/jquery-basic-regex-selector-examples

if语句只遵循其中一个条件

4 个答案: