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

Question

上一个问题的答案是有效的，click here to see. 但仅适用于单个按钮而不是多个按钮以供参考，请参阅此处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