切换几组类并通过HTML本地存储保存

Question

我整理了一个代码，允许我切换一个类并将其保存在本地存储中。

现在我需要再添加2个类来切换并以相同的方式保存。 我不知道如何正确地使用代码和DOM进行迭代来实现这一目标。

这是我的＆＃34;半工作＆＃34;例： http://jsbin.com/nimekebura/1/edit?html,css,js,output

HTML：

    <a href="javascript:void(0)" class="bar-toggle">toggle and save state</a>

<div class="container">
  <div class="box"></div>
  <div class="box"></div>
</div>

<hr />

<div class="container">
  <div class="box"></div>
  <div class="box"></div>
</div>

<hr />

<div class="container">
  <div class="box"></div>
  <div class="box"></div>
</div>

<hr />

<div class="container">
  <div class="box"></div>
  <div class="box"></div>
</div>

JS：

 //retrieve current state
 $('.container').toggleClass(localStorage.toggled);

    /* Toggle */
    $('.bar-toggle').on('click',function(){

     // set 1 localstorage values are always strings (no booleans)  
       if (localStorage.toggled != "with_toggle" ) {
          $(".container").toggleClass("with_toggle", true );
          localStorage.toggled = "with_toggle";

       } else {
          $(".container").toggleClass("with_toggle", false );
          localStorage.toggled = "";
       }


    });

我需要在代码中添加并切换另外两个类到每个.box类。

所以代码会像这样切换：

<div class="container with_toggle">
  <div class="box multi box_toggled"></div>
  <div class="box multi box_toggled"></div>
</div>

实现上述目标的最佳代码实践是什么？

Answer 1

试试这个代码段。我希望，这会对你有所帮助

//retrieve current state
if (localStorage.toggled!='') {
	$('.container').toggleClass('with_'+localStorage.toggled);
	$('.box').toggleClass('multi box_'+localStorage.toggled);
}

/* Toggle */
$('.bar-toggle').on('click',function(){
 // set 1 localstorage values are always strings (no booleans)  
 	if (localStorage.toggled != "toggle" ) {
    $(".container").toggleClass("with_toggle", true );
    $(".box").toggleClass("multi box_toggle", true );
    localStorage.toggled = "toggle";

 	} else {
    $(".container").toggleClass("with_toggle", false );
    $(".box").toggleClass("multi box_toggle", false );
    localStorage.toggled = "";
 	}
});

.container{
	box-shadow: inset 0px 0px 4px #ccc;
	display: inline-block;
	padding: 10px;
}
.with_toggle{
	box-shadow: inset 0px 0px 10px orange;
}
.box{
	width: 100px;
	display: inline-block;
	height: 50px;
	line-height: 50px;
	text-align: center;
	box-shadow: inset 0px 0px 10px #ccc;
}
.box_toggle{
	box-shadow: inset 0px 0px 10px green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="javascript:void(0)" class="bar-toggle">Toggle &amp; Save state</a>
<br><br>

<div class="container">
  <div class="box">A</div>
  <div class="box">B</div>
</div>

<hr />

<div class="container">
  <div class="box">C</div>
  <div class="box">D</div>
</div>

<hr />

<div class="container">
  <div class="box">E</div>
  <div class="box">F</div>
</div>

<hr />

<div class="container">
  <div class="box">G</div>
  <div class="box">H</div>
</div>

Answer 2

如果你只需要迭代每个div容器并添加类。

$('.container').each(function(){
  $(this).addClass('with_toggle');
  $(this).find('.box').addClass('multi box_toggled');
});