javascript - 刷新页面并突出显示表记录时保持相同的单击复选框结果

Question

下面的代码是为了完成2个功能而编写的 1.单击复选框时突出显示表记录 2. 即使页面刷新，结果也保持相同但是使用此代码，表记录不会突出显示，页面也不会在刷新时保持相同的结果。我之前也发布了同样的问题，有些人建议我在 localstorage 上。我也尝试过。但我的知识太贫乏，无法完全理解给出的解释。非常感谢您的帮助，因为我必须将此作为我的大学作业提交

 <style>
    #cb3.highlight .label {background-color:yellow;}
        #cb2.highlight .label {background-color:green;}
        #cb1.highlight .label  {background-color:red;}
    }
    </style>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script>
    Array.prototype.remove = function() {
        var what, a = arguments, L = a.length, ax;
        while (L && this.length) {
            what = a[--L];
            while ((ax = this.indexOf(what)) !== -1) {
                this.splice(ax, 1);
            }
        }
        return this;
    };
    
    var checked = [];
    
    $(document).ready(function() {
        if (localStorage.getItem("checked") == null)
            localStorage.setItem("checked", checked);
    
        $("#Table input").click(function() {
            if ($(this).is(":checked")) {
                $(this).parent().parent().addClass("cb3.highlight .label ");
                checked.push($(this).attr("cb3"));
            } else {
                $(this).parent().parent().removeClass("cb3.highlight .label ");
                checked.remove($(this).attr("cb3"));
            }
            localStorage.setItem("checked", JSON.stringify(checked));
        });
    
        var saved = JSON.parse(localStorage.getItem("checked"));
        for (var i = 0;i < saved.length; i++) {
            var itemAtIndex = $("#" + saved[i] + "");
            itemAtIndex.click();
            itemAtIndex.parent().parent().addClass("cb3.highlight .label ");
        }
    });
    $(document).ready(function() {
        if (localStorage.getItem("checked") == null)
            localStorage.setItem("checked", checked);
    
        $("#Table input").click(function() {
            if ($(this).is(":checked")) {
                $(this).parent().parent().addClass("cb2.highlight .label ");
                checked.push($(this).attr("cb2"));
            } else {
                $(this).parent().parent().removeClass("cb2.highlight .label ");
                checked.remove($(this).attr("cb2"));
            }
            localStorage.setItem("checked", JSON.stringify(checked));
        });
    
        var saved = JSON.parse(localStorage.getItem("checked"));
        for (var i = 0;i < saved.length; i++) {
            var itemAtIndex = $("#" + saved[i] + "");
            itemAtIndex.click();
            itemAtIndex.parent().parent().addClass("cb2.highlight .label ");
        }
    });
    $(document).ready(function() {
        if (localStorage.getItem("checked") == null)
            localStorage.setItem("checked", checked);
    
        $("#Table input").click(function() {
            if ($(this).is(":checked")) {
                $(this).parent().parent().addClass("cb1.highlight .label ");
                checked.push($(this).attr("cb1"));
            } else {
                $(this).parent().parent().removeClass("cb1.highlight .label ");
                checked.remove($(this).attr("cb1"));
            }
            localStorage.setItem("checked", JSON.stringify(checked));
        });
    
        var saved = JSON.parse(localStorage.getItem("checked"));
        for (var i = 0;i < saved.length; i++) {
            var itemAtIndex = $("#" + saved[i] + "");
            itemAtIndex.click();
            itemAtIndex.parent().parent().addClass("cb1.highlight .label");
        }
    });
    </script>
    <div class="col-lg-10">
    
    <table id="Table" border="1">
          <tr id="cb1">
            <td><input type="checkbox" name="cb1" value="y" /></td>
            <td class=label>Click me</td>
        </tr><tr id="cb2">
            <td><input type="checkbox" name="cb2" value="y" /></td>
            <td class=label>Click me</td>
        </tr>
        <tr id="cb3">
            <td><input type="checkbox" name="cb3" value="y" /></td>
            <td class=label>Click me</td>
        </tr>
      </table>
    </div>

Answer 1

有几件事需要修复:您已将同一段代码重复三次，如果您这样做是因为有 3 个复选框，则不需要。您使用了一个选择器，它将选择所有三个复选框并附加单击事件处理程序。

您添加的类是错误的，只需给出要添加到“addClass()”方法的类的名称

$(this).attr("cb3")，错误，您要使用$(this).attr("name")。

<!DOCTYPE html>
<html>
<body>
 <style>
    #cb3.highlight.label {background-color:yellow;}
        #cb2.highlight.label {background-color:green;}
        #cb1.highlight.label  {background-color:red;}
    }
    </style>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script>
    Array.prototype.remove = function() {
        var what, a = arguments, L = a.length, ax;
        while (L && this.length) {
            what = a[--L];
            while ((ax = this.indexOf(what)) !== -1) {
                this.splice(ax, 1);
            }
        }
        return this;
    };
    
    
    $(document).ready(function() {
        var checked = [];
    
        $("#Table input").click(function() {
            if ($(this).is(":checked")) {
                $(this).parent().parent().addClass("highlight label");
                checked.push($(this).attr("name"));
            } else {
                $(this).parent().parent().removeClass("highlight label ");
                checked.remove($(this).attr("name"));
            }
            localStorage.setItem("checked", JSON.stringify(checked));
        });

      if (localStorage.getItem("checked") !== null){
	var saved = JSON.parse(localStorage.getItem("checked"));
	for (var i = 0;i < saved.length; i++) {
	     $("[name='" + saved[i] + "']").trigger('click');
	}
        }
    
    });
    </script>
    <div class="col-lg-10">
    
    <table id="Table" border="1">
          <tr id="cb1">
            <td><input type="checkbox" name="cb1" value="y" /></td>
            <td class=label>Click me</td>
        </tr><tr id="cb2">
            <td><input type="checkbox" name="cb2" value="y" /></td>
            <td class=label>Click me</td>
        </tr>
        <tr id="cb3">
            <td><input type="checkbox" name="cb3" value="y" /></td>
            <td class=label>Click me</td>
        </tr>
      </table>
    </div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>


</script>
</body>
</html>