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。

＆＃13;

   

        $(".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;
            }
        });

＆＃13;

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

＆＃13;

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设置为索引处的元素{数组的{1}}

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

Answer 4

我做错了什么？

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

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

我通过向event处理程序的回调添加click对象并获取event.currentTarget来实现此目的。 event.currentTarget的值是被单击的元素对象。您可以像添加其他javascript对象的状态一样向此对象添加状态

event.currentTarget.clicked = true;

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

＆＃13;

// 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;
  }
});

＆＃13;

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

＆＃13;

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

＆＃13;

单击时单独更改多个按钮颜色

4 个答案: