Question

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

FILES：

Color.html

＆＃13;

<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>

＆＃13;

Checkbox.html

＆＃13;

$('.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','');    
})

＆＃13;

的script.js

＆＃13;

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

＆＃13;

Syle.css

＆＃13;

{{1}}

＆＃13;

jsfiddle文件： checkbox.html - ＆gt; sprite mapping color.html - ＆gt; http://jsfiddle.net/3DPLd/62/ 我不能放置localStorage代码，我道歉。

Answer 1

根据第一页的操作，有多种方法可以在第二页上执行某些操作。在您的情况下，您应该使用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);
 })

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

1 个答案: