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

Question

我放在一起的代码将允许我切换一个类并将其保存在本地存储中。

现在我需要添加2个更多的类来切换并以相同的方式保存。 我不知道如何正确地迭代代码和DOM来实现这一点。

这是我的 “半工作” 的例子： 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 = ""; 
     } 


    }); 

我需要添加和切换另外2班每个。框类已经在代码中。

这样的代码将切换这样的：

<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!='') { 
 
\t $('.container').toggleClass('with_'+localStorage.toggled); 
 
\t $('.box').toggleClass('multi box_'+localStorage.toggled); 
 
} 
 

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

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

.container{ 
 
\t box-shadow: inset 0px 0px 4px #ccc; 
 
\t display: inline-block; 
 
\t padding: 10px; 
 
} 
 
.with_toggle{ 
 
\t box-shadow: inset 0px 0px 10px orange; 
 
} 
 
.box{ 
 
\t width: 100px; 
 
\t display: inline-block; 
 
\t height: 50px; 
 
\t line-height: 50px; 
 
\t text-align: center; 
 
\t box-shadow: inset 0px 0px 10px #ccc; 
 
} 
 
.box_toggle{ 
 
\t 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'); 
});