Question

我的html的设置是我在td里面有字母imgs。用户应按字母顺序单击imgs，每次正确单击img都会被删除。如果错误，将出现xmark。

（尚未出现在代码中：经过三次错误，比赛结束后，我会询问用户是否想再次上场或回到家中）

这是我的jquery代码：

  var error = 0;
        var check = 0;
        $("table img").bind('click',function(){    
            var letterArray = new Array('A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z');
            var clickedValue = $(this).attr('name');


            if(clickedValue ==letterArray[check]){
                $(this).parent().empty(); 
                check+=1;
            } else {
                error+=1;
                $("error").add('<td><img src="images/xmark.png" alt="xmark" name="xmark"/></td>');
                if(error==3){
                    alert("Game Over. Homer will now eat you!");
                    $("table img").unbind("click");
                    $("table img").css("opacity", "0.4");
                }
            }
        });

我的html表格：为了简洁，只发了前6个字母。

       <table>
            <tr class="rows">
                <td><img src="images/Z.png" alt="Z" name="Z"/></td>
                <td><img src="images/R.png" alt="R" name="R"/></td>
                <td><img src="images/S.png" alt="S" name="S"/></td>
                <td><img src="images/U.png" alt="U" name="U"/></td>
                <td><img src="images/B.png" alt="B" name="B"/></td>
                <td><img src="images/A.png" alt="A" name="A"/></td>
            </tr>
       </table> 
       <table><tr id="error"></tr></table>

Answer 1

使用.appendTo()代替.add()

试试这个：

var error = 0;
        var check = 0;
        $("table img").bind('click',function(){    
            var letterArray = new Array('A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z');
            var clickedValue = $(this).attr('name');
            if(clickedValue ==letterArray[check]){
                $(this).parent().empty(); 
                check+=1;
            } else {
                error+=1;
                $('<td><img src="images/xmark.png" alt="xmark" name="xmark"/></td>').appendTo("tr#error");
                if(error==3){
                    alert("Game Over. Homer will now eat you!");
                    $("table img").unbind("click");
                    $("table img").css("opacity", "0.4");
                }
            }
        });

<强> DEMO

jquery，无法在td中添加img

1 个答案: