如何使用不同的 class 获得更多切换 hide/show div

Question

我有一个显示或隐藏 div class 的开关。状态切换保存在本地存储中，因此在页面刷新后会保留所需的设置。

现在我正在尝试获得另一个切换开关，它在不同的 class 上执行相同的功能。我尝试通过简单的复制/粘贴更改 classes 和函数的名称，但它不起作用。

谁能给我一个建议？

Fiddle: https://jsfiddle.net/snake93/s0rx4ube/9/

function save() {   
    var checkbox = document.getElementById("ck1");
    localStorage.setItem("ck1", JSON.stringify(checkbox.checked));  
}

function isChecked(isOn) {
    if (isOn === true) {
        $(".hideme").show();
    } else {
        $(".hideme").hide();
    }
}

//for loading
var checked = JSON.parse(localStorage.getItem("ck1"));
    document.getElementById("ck1").checked = checked;

console.log(checked);

$(document).ready(function(){
    isChecked(checked)
    $(".switch input").on("change", function(e) {
    const isOn = e.currentTarget.checked;
    console.log(isOn)
    isChecked(isOn);
  });
});

.switch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 34px;
  }
  
  .switch input { 
    opacity: 0;
    width: 0;
    height: 0;
  }
  
  .slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    -webkit-transition: .4s;
    transition: .4s;
  }
  
  .slider:before {
    position: absolute;
    content: "";
    height: 26px;
    width: 26px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    -webkit-transition: .4s;
    transition: .4s;
  }
  
  input:checked + .slider {
    background-color: #2196F3;
  }
  
  input:focus + .slider {
    box-shadow: 0 0 1px #2196F3;
  }
  
  input:checked + .slider:before {
    -webkit-transform: translateX(26px);
    -ms-transform: translateX(26px);
    transform: translateX(26px);
  }
  
  /* Rounded sliders */
  .slider.round {
    border-radius: 34px;
  }
  
  .slider.round:before {
    border-radius: 50%;
  }

/*END OF TOGGLE SWITCH*/

.hideme {
  padding:20px;
  background: blue;
  color: white;
  font-weight: 800;
  text-align: center;
}

<!-- jQuery -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<label class="switch">
<input type="checkbox" id="ck1" onchange="save()">
<span class="slider round hide-off"></span>
</label>
<br><br>

<div class="hideme">Please hide me, but bring me back later ;-)</div>

Answer 1

您需要为 show/hide DIV 提供不同的 ID，并将它们传递给函数。（这只是几种方法中的一种）

您想要 show/hide 的元素需要一个唯一的 ID，以便我们可以将其与其他元素区分开来，因此在这里忘记使用 class 作为选择器。 toggle 函数有两个参数，调用它的元素和被切换的元素 ID。在下面的 HTML 中，'this' 将在单击时引用该特定复选框。 '#div1' 和 '#div2' 是要切换的元素的 ID。

我已经在你的本地存储位中添加了。

function toggle(p, c){
    if ($(p).prop("checked")){
    $(c).show();
  }else{
    $(c).hide();
  }

  localStorage.setItem($(p).attr("id"), JSON.stringify($(p).prop("checked")));

}

.switch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 34px;
  }
  
  .switch input { 
    opacity: 0;
    width: 0;
    height: 0;
  }
  
  .slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    -webkit-transition: .4s;
    transition: .4s;
  }
  
  .slider:before {
    position: absolute;
    content: "";
    height: 26px;
    width: 26px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    -webkit-transition: .4s;
    transition: .4s;
  }
  
  input:checked + .slider {
    background-color: #2196F3;
  }
  
  input:focus + .slider {
    box-shadow: 0 0 1px #2196F3;
  }
  
  input:checked + .slider:before {
    -webkit-transform: translateX(26px);
    -ms-transform: translateX(26px);
    transform: translateX(26px);
  }
  
  /* Rounded sliders */
  .slider.round {
    border-radius: 34px;
  }
  
  .slider.round:before {
    border-radius: 50%;
  }

/*END OF TOGGLE SWITCH*/



.hideme{
  padding:20px;
  background: blue;
  color: white;
  font-weight: 800;
  text-align: center;
  display:none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label class="switch">
<input type="checkbox" id="ck1" onchange="toggle(this, '#div1')">
<span class="slider round hide-off"></span>
</label>

<label class="switch">
<input type="checkbox" id="ck2" onchange="toggle(this, '#div2')">
<span class="slider round hide-off"></span>
</label>
<br><br>

<div id="div1" class="hideme">Please hide me, but bring me back later ;-)</div>
<div id="div2" class="hideme">Please hide me, but bring me back later ;-)</div>

Answer 2

这是另一种可能的解决方案，也是我更喜欢的解决方案：

将输入更改为：

<input type="checkbox" id="ck1" class="btn" data-toggle-id="#div1">

那么 javascript（jquery）会变成这样：

$('.btn').on('change', function(){
    var $d = $($(this).attr('data-toggle-id'));
    if ($(this).prop("checked")){
        $d.show();
    }else{
    $d.hide();
  }
    
});

Answer 3

我相信您可以通过更好地使用 css 选择器并将具有相同输入 ID 的属性添加到您打算 show/hide.

的 div 来获得更多活力

HTML:

<label class="switch">
  <input type="checkbox" id="ck1">
  <span class="slider round hide-off"></span>
</label>
<br><br>

<label class="switch">
   <input type="checkbox" id="ck2">
   <span class="slider round hide-off"></span>
</label>
<br><br>

<div class="hideme" id="label-ck1">Please hide me...</div>
<div class="hideme" id="label-ck2">Please hide me...</div>

JAVASCRIPT

$(document).ready(function(){
    getLocalStatus()
    $(".switch input").on("change", function(e) {
       const element = e.currentTarget;
       saveStatus(element)
       setLabelVisibility(element.getAttribute('id'),element.checked);
    })
})

function getLocalStatus() {
    const checkboxes = $('input[type=checkbox]');
    checkboxes.each(function(index,checkbox){
        const checkboxId = checkbox.getAttribute('id')
        var currentStatus= localStorage.getItem(checkboxId)
        if (currentStatus == "true") {
            currentStatus = true;
        } else {
          currentStatus = false;
        }
        checkbox.checked = currentStatus;
        setLabelVisibility(checkboxId, currentStatus)
    })
}

function setLabelVisibility(id,status){
   const label = $("#label-" + id + "");
   if(status == false){
      label.hide();
      return;
   }
   label.show();
 }

 function saveStatus(e) {   
    localStorage.setItem(e.getAttribute('id'), e.checked)
 }

如何使用不同的 class 获得更多切换 hide/show div

How to get more toggle hide/show div with different class

html

javascript

css

jquery

toggle