如何复选框对其他页面进行更改？

Posted 2021-05-06

我正在处理我正在进行的项目。解决这个问题会让我很舒服。我正在处理两个html文件。 （checkbox.html和color.html）checkbox.html文件中有两个复选框。选中这两个复选框后，color.html中div的颜色需要更改。 （.example必须为红色。）此操作必须在localStorage中注册。因此，即使刷新页面，color.html中的颜色也不应该更改。按下复选框后，必须转动旧颜色。 （必须是蓝色的）。我尝试了一切。这是javascript代码很难吗？我应该添加什么？

FILES：

Color.html

<link rel="stylesheet" href="css/style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
 <script src="js/script.js"></script>

<div class="example"> </div>

Checkbox.html

<link rel="stylesheet" href="css/style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
 <script src="js/script.js"></script>

   

        <div class="edit-container">
        <input type="checkbox" id="a1" />
        <input type="checkbox" id="a2" />
        </div>
    
  

的script.js

$('.edit-container input[type="checkbox"]').change(function() {
    var examplediv= document.getElementById("example")
    var container=$(this).parent('.edit-container');
    
    if(container.find('#a1:checked,#a2:checked').length==2)
       
        examplediv.css('background','red');
    else
         examplediv.css('background','');    
})

style.css文件

.edit-container {width:100px; height:100px; background:green;}
.example {background:blue; width:200px; height:200px;}

jsfiddle文件：checkbox.html - > http://jsfiddle.net/3DPLd/62/ color.html - > https://jsfiddle.net/uumkbkwo/14/我不能放置localStorage代码，我道歉。

答案

根据第一页的动作，有多种方法在第二页上进行某些操作。在你的情况下，你应该使用localStorage.setItem和localStorage.getItem来完成这项工作。这将根据复选框将颜色存储在存储中，您可以在任何页面上检索它们。

Read More here

试试以下

//This is inside the checkbox.html

$('.edit-container input[type="checkbox"]').change(function() {

  var container = $(this).parent('.edit-container2').parent('.edit-container');

  if (container.find('#a1:checked,#a2:checked').length == 2) {
    localStorage.setItem('color', 'red')
  } else {
    localStorage.setItem('color', '')
  }
})

//This is inside the color.htmls

 $(document).ready(function() {
    let color = localStorage.getItem('color');

    $(".example").css('background', color);
 })