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

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。因此，您应该使用类#myBtn选择按钮，而不是使用ID .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链接

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

位于页面底部，jquery脚本位于jquery链接之后。

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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