Question

我遇到了jQuery的问题，我找不到任何可以帮助我的东西。

所以我要做的就是改变＆＃34;光标＆＃34;的颜色。当马铃薯的数量大于光标的成本时，类为绿色。所以我想要发生的是文本＆＃34; Buy Cursor＆＃34;如果土豆超过cursorCost，则为绿色。

这是HTML＆amp; jQuery代码：

    <html>

<head>
    <title>Potato Clicker</title>
    <link rel="stylesheet" type="text/css" href="interface.css">
</head>

<body>

    <div id="left">
        <img id="potato-img" onClick="potatoClick(clickPower)" src="stockvault-potatoes107220.jpg" width="300" height="300">
        <br>
        <div id="mainDisplay">
            <span id="potatoes">0</span> 
            <br>potatoes
            <br>
            <br>Producing <span id="pps">0</span> potatoes per second
            <br>
            <button onClick="save()">&nbsp; Save &nbsp;</button>
            <br>
            <button onClick="reset()">&nbsp; Reset &nbsp;</button>
        </div>
    </div>

    <div id="middle-buy">
        <br>
        <div id="buildings" class="cursor" onClick="buyCursor()">&nbsp; Buy Cursor &nbsp;</div>
        <br>
        <br>
        <div id="buildings" class="farmer" onClick="buyFarmer()">&nbsp; Buy Farmer &nbsp;</div>
        <br>
        <br>
        <div id="buildings" class="breeder" onClick="buyBreeder()">&nbsp; Buy Breeder &nbsp;</div>
        <br>
        <br>
    </div>

    <div id="middle-cost">
        <div style="font-size: 18px">Next building costs:</div>
        <div id="cost"><span id="cursorCost">10</span> potatoes</div>
        <br>
        <div id="cost"><span id="farmerCost">100</span> potatoes</div>
        <br>
        <div id="cost"><span id="breederCost">500</span> potatoes</div>
        <br>
    </div>

    <div id="middle-info">
        <br>
        <div id="quantity"><span id="cursors">0</span> cursors clicking away at <span id="cursorPps">0</span> potatoes per second</div>
        <br>
        <br>
        <br>
        <div id="quantity"><span id="farmers">0</span> farmers farming at <span id="farmerPps">0</span> potatoes per second</div>
        <br>
        <br>
        <br>
        <div id="quantity"><span id="breeders">0</span> breeders breeding at <span id="breederPps">0</span> potatoes per second</div>
        <br>
        <br>
        <br>
    </div>


    <script src="main.js"></script>
    <script src="jquery.js"></script>
    <script>
        $(document).ready(function () {

            window.setInterval(function () {

                if (potatoes >= cursorCost) {

                    $(".cursor").addClass("buyable");

                };

            }, 1000);

        });
    </script>
</body>

</html>

这是CSS：

.cursor.buyable {

 color: green;

}

现在的问题是，虽然我使用正确的选择器，

下的文字

class="cursor"

时

不会变为绿色

potatoes > cursorCost

Answer 1

问题在于您的选择器：

$("cursor")

如果您希望包含cursor id的元素更改为：

$("#cursor")

如果您需要将cursor class的元素更改为：

$(".cursor")

if语句中的jQuery addClass（）函数

1 个答案: