Question

我应该为我的Javascript类创建一个游戏，我正在尝试使用jQuery创建一个checker游戏。我刚刚开始添加jQuery，到目前为止还没有任何工作。这非常令人沮丧。

$( document ).ready(function() {
    $("#red1").hide();
});

#checkerBoard {
    border: 2px solid black;
    width: 1000px;
}

.red {
    background-color: red;
    width: 100px;
    height: 100px;
    margin: 0;
}
.black {
    background-color: #000;
    width: 100px;
    height: 100px;
    margin: 0;
}
td {
    width: 2em;
    height: em;
    text-align: center;
}

img {
    width: 6em;
    height: 6em;
    text-align: center;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>How to Play Checkers</title>
    <link rel="stylesheet" href="style.css" type="text/css" media="screen">
</head>
<body>
<div id="wrapper">
    <header>
        <h1>How to Play Checkers</h1>
        <nav>
            <ul>
                <li>Home</li>
                <!--add more-->
            </ul>
        </nav>
    </header>
    <section>

        <p></p>
        <table id="checkerBoard">
            <thead><!--insert something--></thead>
            <tbody>
            <tr id="row1">
                <td class="red"><img src="images/blackCheckerPiece.png" alt="red checker piece" /></td>
                <td class="black"><img src="images/blackCheckerPiece.png" alt="red checker piece" /></td>
                <td class="red"><img src="images/blackCheckerPiece.png" alt="red checker piece" /></td>
                <td class="black"><img src="images/blackCheckerPiece.png" alt="red checker piece" /></td>
                <td class="red"><img src="images/blackCheckerPiece.png" alt="red checker piece" /></td>
                <td class="black"><img src="images/blackCheckerPiece.png" alt="red checker piece" /></td>
                <td class="red"><img src="images/blackCheckerPiece.png" alt="red checker piece" /></td>
                <td class="black"><img src="images/blackCheckerPiece.png" alt="red checker piece" /></td>

            </tr>
            <tr id="row2">
                <td class="black"><img src="images/blackCheckerPiece.png" alt="red checker piece" /></td>
                <td class="red"><img src="images/blackCheckerPiece.png" alt="red checker piece" /></td>
                <td class="black"><img src="images/blackCheckerPiece.png" alt="red checker piece" /></td>
                <td class="red"><img src="images/blackCheckerPiece.png" alt="red checker piece" /></td>
                <td class="black"><img src="images/blackCheckerPiece.png" alt="red checker piece" /></td>
                <td class="red"><img src="images/blackCheckerPiece.png" alt="red checker piece" /></td>
                <td class="black"><img src="images/blackCheckerPiece.png" alt="red checker piece" /></td>
                <td class="red"><img src="images/blackCheckerPiece.png" alt="red checker piece" /></td>
            </tr>
            <tr id="row3">

                <td class="red"></td>
                <td class="black"></td>
                <td class="red"></td>
                <td class="black"></td>
                <td class="red"></td>
                <td class="black"></td>
                <td class="red"></td>
                <td class="black"></td>
            </tr>
            <tr id="row4">

                <td class="black"></td>
                <td class="red"></td>
                <td class="black"></td>
                <td class="red"></td>
                <td class="black"></td>
                <td class="red"></td>
                <td class="black"></td>
                <td class="red"></td>
            </tr>
            <tr id="row5">

                <td class="red"></td>
                <td class="black"></td>
                <td class="red"></td>
                <td class="black"></td>
                <td class="red"></td>
                <td class="black"></td>
                <td class="red"></td>
                <td class="black"></td>
            </tr>
            <tr id="row6">
                <td class="black"></td>
                <td class="red"></td>
                <td class="black"></td>
                <td class="red"></td>
                <td class="black"></td>
                <td class="red"></td>
                <td class="black"></td>
                <td class="red"></td>
            </tr>
            <tr id="row7">
                <td class="red"><img id="red1" src="images/redCheckerPiece.png" alt="red checker piece" /></td>
                <td class="black"><img src="images/redCheckerPiece.png" alt="red checker piece" /></td>
                <td class="red"><img src="images/redCheckerPiece.png" alt="red checker piece" /></td>
                <td class="black"><img src="images/redCheckerPiece.png" alt="red checker piece" /></td>
                <td class="red"><img src="images/redCheckerPiece.png" alt="red checker piece" /></td>
                <td class="black"><img src="images/redCheckerPiece.png" alt="red checker piece" /></td>
                <td class="red"><img src="images/redCheckerPiece.png" alt="red checker piece" /></td>
                <td class="black"><img src="images/redCheckerPiece.png" alt="red checker piece" /></td>
            </tr>
            <tr id="row8">
                <td class="black"><img src="images/redCheckerPiece.png" alt="red checker piece" /></td>
                <td class="red"><img src="images/redCheckerPiece.png" alt="red checker piece" /></td>
                <td class="black"><img src="images/redCheckerPiece.png" alt="red checker piece" /></td>
                <td class="red"><img src="images/redCheckerPiece.png" alt="red checker piece" /></td>
                <td class="black"><img src="images/redCheckerPiece.png" alt="red checker piece" /></td>
                <td class="red"><img src="images/redCheckerPiece.png" alt="red checker piece" /></td>
                <td class="black"><img src="images/redCheckerPiece.png" alt="red checker piece" /></td>
                <td class="red"><img src="images/redCheckerPiece.png" alt="red checker piece" /></td>
            </tr>
            </tbody>
        </table>
    </section>
</div>

<script src="jquery-3.1.1.js" type="text/javascript"></script>
<script src="script.js" type="text/css"></script><!--Move later?-->
</body>
</html>

Answer 1

确保您的jquery路径正确无误。 JS类型必须是“text / javascript”。如果删除type属性，它也会起作用。 HTML5支持它。

Answer 2

https://jsfiddle.net/omutzak7/3/

确保您的链接脚本的类型正确。

zeros = 0
reSum = [0]
reInd = [[]]
for i, v in enumerate(lst):
    if v == 0:
        zeros += 1
    elif zeros >= 2:
        zeros = 0
        reSum.append(v)
        reInd.append([i])

    else:
        zeros = 0
        reSum[-1] += v
        reInd[-1] += [i]

reSum
# [-7, -8, -4, -65, 20, -3]

reInd
# [[1],
#  [4],
#  [7],
#  [11, 13, 14, 15, 17],
#  [20, 21, 23, 24, 25],
#  [32, 33, 34, 36, 37, 38, 39]]

正如您在jsfiddle链接中看到的那样，图像被正确隐藏。

无法让jQuery工作，请告诉我我做错了什么

2 个答案: