javascript - Jquery toggleActive 不起作用

Question

我真的不知道如何用 Javascript 编写代码。对于 Airconsole，我需要创建 Controller ，因为碰巧我是我们团队中唯一能够使用 CSS 和 HTML 的人。

现在我想创建一个改变颜色的按钮，当它被按下时(并保持那个颜色) 好吧，我试过了，但不知道如何让它工作。我希望你能帮助我。

我的 HTML:

<div id="characterScreen_readyButton" class="characterScreen_center" ontouchend="sendReady();" ontouchend="sendReady();">
    <div class="readyButton">           
    </div>
</div>

这是我的 CSS:

.readyButton{
            height: 100%;
            width: 100%;
            margin: 0;
            padding: 0;
            background: url("images/readyButton.png") no-repeat center;
            background-size: contain;

        }

.readyButton.active {
            height: 100%;
            width: 100%;
            margin: 0;
            padding: 0;
            background: url("images/readyButtonP.png") no-repeat center;
            background-size: contain;
        }

还有我的 Javascript:

<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.js" >
$('.readyButton').click(function(){
    if($(this).hasClass('active')){
        $(this).removeClass('active')
    } else {
        $(this).addClass('active')
    }
});
</script>

Answer 1

你不能有 <script src=里面有脚本。 这将解决您的问题:

<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.js" ></script>
<script>
$('.readyButton').click(function(){
    if($(this).hasClass('active')){
        $(this).removeClass('active')
    } else {
        $(this).addClass('active')
    }
});
</script>