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

Question

我的 javascript 代码有问题，我有一个 sn-p，它根据循环范围创建多个按钮，这些按钮共享相同的类但 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>

Answer 2

您正在尝试使用单个 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);
});

Answer 3

您可以将每个元素的颜色数组存储在元素的data-*，使用.data()、Array.prototype.reverse() 切换到数组，将background 设置为数组索引0 处的元素

$("button").on("click", function() {
  $(this).css("background", $(this).data().colors.reverse()[0])
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button data-colors='["#FF8E2B", "#27AE60"]' style="background:#FF8E2B">click</button>

Answer 4

我做错了什么？

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

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

我通过将event 对象添加到click 处理程序的回调并获取event.currentTarget 来做到这一点。 event.currentTarget 的值是被点击的元素对象。您可以向该对象添加状态，就像向另一个其他 javascript 对象添加状态一样

event.currentTarget.clicked = true;

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

// just some simple code to get your template in pure JS, don't worry about the code here
const range = [0,1,2,3,4,5];

const template = `<div class="panel-footer" id="loop">
  <ul class="post-action">
    ${range.map(i => `
      <button class="btn btn-success guess" id="${i}" value="${i}">${i}</button>
    `)}
  </ul>
</div>`;

const div = document.createElement('div');
div.innerHTML = template;
document.body.appendChild(div);

// here are where the changes start

// var clicked = true; instead of having a global variable to keep track of the state of all your buttons

$(".guess").click(function(event) {
  // you need local state attached to the button
  
  // here we're getting the button element being clicked
  const currentTarget = event.currentTarget;
  xyz = this.id
  console.log(xyz);
  
  // if clicked is truthy
  if (currentTarget.clicked) {
    $('#' + this.id).css('background-color', '#FF8E2B');
    currentTarget.clicked = false;
  } else {
    $('#' + this.id).css('background-color', '#27AE60');
    // set on the element some state
    currentTarget.clicked = true;
  }
});

.guess {
  /* start out in the orange state */
  background-color: #FF8E2B;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>