Javascript 单击时分别更改多个按钮的颜色

我的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>

{范围%中的i的%1}
{{i}
{%endfor%}

我尝试在单击每个按钮时更改其颜色，再次单击时会更改回默认颜色，但效果不好；单击按钮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>

单击=真；
$（“.guess”）。单击（函数（）{
xyz=this.id
console.log（xyz）
如果（单击）{
$（'#'+this.id）.css（'background-color'，'#FF8E2B'）；
单击=假；
}否则{
$（'#'+this.id）.css（'background-color'，'#27AE60'）；
单击=真；
}
});

我做错了什么？

您试图使用单个变量“跟踪”多个按钮的状态，当然这不起作用

请尝试以下方法

$(".guess").click(function(){
    var $this = $(this);
    var clicked = $this.data('clicked');
    if(clicked) {
        $this.css('background-color', '#FF8E2B');
    } else {
        $this.css('background-color', '#27AE60');
    }
    $this.data('clicked', !clicked);
});

您试图使用单个var“跟踪”多个按钮的状态，当然这是行不通的

请尝试以下方法

$(".guess").click(function(){
    var $this = $(this);
    var clicked = $this.data('clicked');
    if(clicked) {
        $this.css('background-color', '#FF8E2B');
    } else {
        $this.css('background-color', '#27AE60');
    }
    $this.data('clicked', !clicked);
});

---

您可以在元素的

data-*

处存储每个元素的颜色数组，使用

.data（）

，

array.prototype.reverse（）

切换到数组，将

背景设置为数组索引
0
处的元素


$（“按钮”）。在（“单击”，函数（）{
$（this.css（“背景”，$（this.data（）.colors.reverse（）[0]）
})

单击
可以在元素的
数据-*
处为每个元素存储一个颜色数组，使用
.data（）
，
array.prototype.reverse（）
切换到数组，将
背景设置为数组索引
0
处的元素


$（“按钮”）。在（“单击”，函数（）{
$（this.css（“背景”，$（this.data（）.colors.reverse（）[0]）
})

单击
您的问题是您正在使用
单击的
作为全局变量

只需将
单击的
存储在
中即可



$（“.guess”）。单击（函数（）{
xyz=this.id
console.log（xyz）
如果（单击此项）{
$（this.css（'background-color'，'#FF8E2B'）；
this.clicked=false；
}否则{
$（this.css（'background-color'，'#27AE60'）；
this.clicked=true；
}
});


一
二
三

您的问题是，您正在使用单击的
作为全局变量

只需将
单击的
存储在
中即可



$（“.guess”）。单击（函数（）{
xyz=this.id
console.log（xyz）
如果（单击此项）{
$（this.css（'background-color'，'#FF8E2B'）；
this.clicked=false；
}否则{
$（this.css（'background-color'，'#27AE60'）；
this.clicked=true；
}
});


一
二
三


我做错了什么

代码的主要问题是有一个变量跟踪多个按钮元素的单击状态

解决这个问题的方法是向元素本身添加状态，本质上为多个元素提供多个变量

为此，我将
事件
对象添加到
单击
处理程序的回调中，并获取
事件.currentTarget
。
event.currentTarget
的值是正在单击的元素对象。您可以向这个对象添加状态，就像向其他javascript对象添加状态一样

event.currentTarget.clicked = true;

现在您可以跟踪每个元素的状态了


//只需一些简单的代码就可以在纯JS中获取模板，不用担心这里的代码
常数范围=[0,1,2,3,4,5]；
常量模板=`

${range.map（i=>`
${i}
`)}

`;
const div=document.createElement（'div'）；
div.innerHTML=模板；
文件.正文.附件（div）；
//这里是变化的起点
//var=true；而不是使用全局变量来跟踪所有按钮的状态
$（“.guess”）。单击（函数（事件）{
//您需要将本地状态附加到按钮
//在这里，我们得到的按钮元素被点击
const currentTarget=event.currentTarget；
xyz=this.id
console.log（xyz）；
//如果这是真的
如果（currentTarget.clicked）{
$（'#'+this.id）.css（'background-color'，'#FF8E2B'）；
currentTarget.clicked=false；
}否则{
$（'#'+this.id）.css（'background-color'，'#27AE60'）；
//在元素上设置一些状态
currentTarget.clicked=true；
}
});
。猜猜看{
/*从橙色州开始*/
背景色：#FF8E2B；
}

我做错了什么

代码的主要问题是有一个变量跟踪多个按钮元素的单击状态

解决这个问题的方法是向元素本身添加状态，本质上为多个元素提供多个变量

为此，我将
事件
对象添加到
单击
处理程序的回调中，并获取
事件.currentTarget
。
event.currentTarget
的值是正在单击的元素对象。您可以向该对象添加状态，就像向另一个javascript对象添加状态一样

event.currentTarget.clicked = true;

现在你可以跟踪状态了