クリックしたときに複数のボタンの色を別々に変更する

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

あなたはこの文句を言わない仕事が

もちろん、「トラック」とは、単一の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 2

を試してみてください要素、使用.data()、Array.prototype.reverse()のdata-*の要素アレイに切り替えるために、配列のインデックス0で要素にbackground設定

$("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 3

あなたの問題は、グローバル変数として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 4

私が間違って何をしましたか？

あなたのコードを持っている主な問題は、あなたが複数ボタン要素のクリックされた状態の変数キープトラックを持っているということです。この問題を解決するために

方法がにある本質的複数に複数要素のため変数を与える要素自体に状態を追加します。

私はこれを、オブジェクトをclickハンドラのコールバックに追加し、event.currentTargetを取得しています。 event.currentTargetという値が、クリックされた要素オブジェクトです。あなたは今、あなたは、各要素の状態を追跡することができます

event.currentTarget.clicked = true; 

あなたは別の他のJavaScriptのオブジェクトに状態を追加したいだけのように、このオブジェクトの状態を追加することができます！

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