單擊以更改多個按鈕的按鈕顏色

Question

先前的問題答案有效， 請單擊此處查看。 但僅適用於單個按鈕，不適用於多個按鈕供參考，請參見http://jsfiddle.net/wmy8vucb/9/

 $( "#myBtn" ).click(function() { $(this).addClass('myclass'); localStorage.setItem('clicked', '1'); }); if(localStorage.getItem("clicked") != null){ $("#myBtn").addClass('myclass'); } 

 .myclass{ background-color:green !important; } 

 <button id="myBtn" class="btn btn-default btn-lg myBtn" style="background: #ef332d; color: #fff;" type="button" data-uid="IeUtIMnV0V1JpQlU">Procced</button> <button id="myBtn" class="btn btn-default btn-lg myBtn" style="background: #ef332d; color: #fff;" type="button" data-uid="khjdvhbjdhjbvjkbs">Procced 2</button> <button id="myBtn" class="btn btn-default btn-lg myBtn" style="background: #ef332d; color: #fff;" type="button" data-uid="hdfhkdsvkhvs">Procced 3</button> so-on 

Answer 1

不允許多個元素具有相同的ID。 因此，不要使用ID為#myBtn的按鈕來選擇按鈕，而應使用.myBtn類的按鈕來選擇按鈕。

另外，對於localStorage您可以將單擊按鈕的ID存儲在數組中。

的HTML

<button id="myBtn" class="btn btn-default btn-lg myBtn" style="background: #ef332d; color: #fff;" type="button" data-uid="sdhjbaskjhnbsdvkjnd">Procced</button>

<button id="myBtn1" class="btn btn-default btn-lg myBtn" style="background: #ef332d; color: #fff;" type="button" data-uid="hbsddjhbsdjbhsd">Procced 2</button>

<button id="myBtn2" class="btn btn-default btn-lg myBtn" style="background: #ef332d; color: #fff;" type="button" data-uid="kjfkjbsdkbjsdvbjk">Procced 3</button>


so-on

JS

$(".myBtn").click(function() {

  $(this).addClass('myclass');

    var itemsStr = localStorage.getItem('clicked');
  var items = [];
  if(itemsStr) {
     items = JSON.parse(itemsStr);
  }
    items.push($(this).attr("id"));
  localStorage.setItem('clicked',JSON.stringify(items));

});

if (localStorage.getItem("clicked") != null) {
  var itemsStr = localStorage.getItem('clicked');
  var items = [];
  if(itemsStr) {
     items = JSON.parse(itemsStr);
  }

  items.forEach(function(id) {
    $("#" + id).addClass("myclass");
  });
}

這是更新的小提琴： http : //jsfiddle.net/wmy8vucb/11/

我還有其他一些建議：

• 避免設置內聯樣式： style="background: #ef332d; color: #fff;" 。 相反，您可以創建具有這些樣式的CSS類，然后將其設置為按鈕。

• 盡可能避免使用!important 。 通常認為這是一種不良做法。

Answer 2

你應該把jQuery鏈接

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

在頁面底部，並在jquery鏈接后顯示jquery腳本。

 <button class="myBtn" class="btn btn-default btn-lg myBtn" style="background: #ef332d; color: #fff;" type="button" data-uid="IeUtIMnV0V1JpQlU">Procced</button> <button class="myBtn" class="btn btn-default btn-lg myBtn" style="background: #ef332d; color: #fff;" type="button" data-uid="khjdvhbjdhjbvjkbs">Procced 2</button> <button class="myBtn" class="btn btn-default btn-lg myBtn" style="background: #ef332d; color: #fff;" type="button" data-uid="hdfhkdsvkhvs">Procced 3</button> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script> $(".myBtn").click(function() { $(this).addClass('myclass'); localStorage.setItem('clicked', '1'); }); if(localStorage.getItem("clicked") != null){ $(".myBtn").addClass('myclass'); } </script> </body> 

Answer 3

我已經編輯了您的小提琴檢查，以下內容可能對您有所幫助。

 $( ".btn" ).click(function() { var x=$(this).attr('class').split(' ').pop(); if(x=='myclass') { $(this).removeClass('myclass'); } else { $(this).addClass('myclass'); } }); 

 .myclass{ background-color:green !important; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button id="myBtn" class="btn btn-default btn-lg myBtn" style="background: #ef332d; color: #fff;" type="button" data-uid="sdhjbaskjhnbsdvkjnd">Procced</button> <button id="myBtn" class="btn btn-default btn-lg myBtn" style="background: #ef332d; color: #fff;" type="button" data-uid="hbsddjhbsdjbhsd">Procced 2</button> <button id="myBtn" class="btn btn-default btn-lg myBtn" style="background: #ef332d; color: #fff;" type="button" data-uid="kjfkjbsdkbjsdvbjk">Procced 3</button> so-on