javascript - 单击时分别更改多个按钮颜色

Question

我的 javascript 代码遇到了问题，我有一个片段根据循环范围创建了多个按钮，这些按钮共享相同的类，但 id 不同

<div class="panel-footer" id="loop">
    <ul class="post-action">
         {% for i in range %}
                <button class="btn btn-success guess" id="{{ i }}" value="{{ i }}" onclick="transferField(this.value)">{{ i }} </button>
         {% endfor %}
    </ul>
</div>

我试图在单击按钮时更改每个按钮的颜色，再次单击时更改回默认颜色，但它工作不正常，当我单击按钮 5 时，它会更改颜色，但一旦我单击按钮 6，它就会更改颜色。在我单击按钮 6 或再次单击另一个按钮之前，不会改变颜色。这是js代码:

<script>

        clicked = true;

        $(".guess").click(function(){
            xyz = this.id
            console.log(xyz)
            if(clicked){
                $('#' + this.id).css('background-color', '#FF8E2B');
                clicked  = false;
            } else {
                $('#' + this.id).css('background-color', '#27AE60');
                clicked  = true;
            }
        });


</script>

我做错了什么？

Answer 1

您的问题是您正在使用 clicked 作为全局变量。

只需将clicked存储在this中。

   

        $(".guess").click(function(){
            xyz = this.id
            console.log(xyz)
            if(this.clicked){
                $(this).css('background-color', '#FF8E2B');
                this.clicked  = false;
            } else {
                $(this).css('background-color', '#27AE60');
                this.clicked  = true;
            }
        });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="panel-footer" id="loop">
    <ul class="post-action">
         
                <button class="btn btn-success guess" id="one" value="one" > one</button>
                <button class="btn btn-success guess" id="two" value="two" > two</button>
                <button class="btn btn-success guess" id="three" value="three" > three</button>
         
    </ul>
</div>