切換幾組類並通過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'); 
});