javascript - 如何使用localStorage保存radio并显示所有item

标签 javascript jquery json local-storage

我正在开发这个博客 ( https://simulatorio.blogspot.com.br/?m=2)。

这是正文代码:CodePen 

$(document).ready(function() {

  $("input[value='wrong']").click(function() {

    $(this).parent()
    .addClass("wrong")
    .siblings().removeClass("right wrong");
    
    $(this).prop('checked', true);

    $(this).closest('form').find("input[type='checkbox']").prop('checked', true);
  });

  $("input[value='right']").click(function() {
    $(this).parent()
    .addClass("right")
    .siblings().removeClass("right wrong");
    
    $(this).closest('form').find("input[type='checkbox']").prop('checked', true);
  });

  $("input[type='checkbox']").click(function() {
    //$(this).parent()
    //.siblings().removeClass("right wrong");

    if( $(this).prop("checked") == true) {
	return false;
    } else {
    
    $(this).closest('form').find("input[type='radio']").parent()
    .siblings().removeClass("right wrong");

    $(this).closest('form').find("input[type='radio']").prop('checked', false);

    }

  });

});
.switch {
  position: relative;
  display: inline-block;
  float: right;
  width: 60px;
  height: 34px;
}

.switch input {display:none;}

.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);
}


.option {
  background-color:#eeeeee;
  background-image:url(https://1.bp.blogspot.com/-5zENhyIEpxk/WBlziC5KHEI/AAAAAAAACcw/UEZqzY0EA4cOqEgzJyHvaXrOZCm7b_oZQCLcB/s1600/circle-1.png);
  background-repeat:no-repeat;
  background-size: 20px 20px;
  background-position:10px 50%;
  display: block;
  padding: 5px 10px 5px 35px ;
  color: #000;
  text-decoration: none;
  -moz-border-radius: 6px;
  -webkit-border-radius: 6px;
  -khtml-border-radius: 6px;
  border-radius: 6px;
  box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.6);
  -moz-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.6);
  -webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.6);
  text-shadow: 0px -1px 1px rgba(0, 0, 0, 0.25);
  border-bottom: 1px solid rgba(0, 0, 0, 0.25);
  position: relative;
  text-decoration: none;
  //margin-bottom: 10px;
  cursor: pointer;
    outline: none;
}

.option:hover {
  background-color:#eeeeee;
  background-image:url(https://2.bp.blogspot.com/-Fby5eMbgJsE/WBopfcqsk1I/AAAAAAAACes/1TIz_GeHcvMdOX1dflzd6aHmOJ8ZwhP1ACLcB/s1600/circle.png);
  background-repeat:no-repeat;
  background-size: 20px 20px;
  background-position:10px 50%;
  color: #000;
}

input[type="radio"] {
  display: none;
  opacity: 0;
  margin: 0;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
}

.right, .right:hover {
  background-color: #4CAF50;
  background-image:url(https://1.bp.blogspot.com/-PHpDpRx1uQk/WBl5t-tKDaI/AAAAAAAACdc/pCRHItQM0ZokCupwqvURZll2TwJ9CcIaACLcB/s1600/checked-symbol.png);
  background-repeat:no-repeat;
  background-size: 20px 20px;
  background-position:10px 50%;
  color: #fff;
}

.wrong, .wrong:hover {
  background-color: #f44336;
  background-image:url(https://1.bp.blogspot.com/-aiETYepUTDs/WBl5t32FrTI/AAAAAAAACdg/dppZ49C9vV4eJoQU3l_C7xUm0Am5UQMywCLcB/s1600/cross-mark-on-a-black-circle-background.png);
  background-repeat:no-repeat;
  background-size: 20px 20px;
  background-position:10px 50%;
  color: #fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class="form3">
  <label class="switch">
  <input type="checkbox">
  <div class="slider"></div>
</label>
  <br /><br />
    <label class="option"><input type="radio" name="option" value="wrong" class="option1">A</label>
    <label class="option"><input type="radio" name="option" value="wrong" class="option2">B</label>
    <label class="option"><input type="radio" name="option" value="wrong" class="option3">C</label>
    <label class="option"><input type="radio" name="option" value="wrong" class="option4">D</label>
    <label class="option"><input type="radio" name="option" value="right" class="option5">E</label>
    <br />

</form>


<form class="form3">
  <label class="switch">
  <input type="checkbox">
  <div class="slider"></div>
</label>
  <br /><br />
    <label class="option"><input type="radio" name="option" value="wrong" class="option1">A</label>
    <label class="option"><input type="radio" name="option" value="wrong" class="option2">B</label>
    <label class="option"><input type="radio" name="option" value="wrong" class="option3">C</label>
    <label class="option"><input type="radio" name="option" value="wrong" class="option4">D</label>
    <label class="option"><input type="radio" name="option" value="right" class="option5">E</label>
    <br />
</form>


<form class="form3">
  <label class="switch">
  <input type="checkbox">
  <div class="slider"></div>
</label>
  <br /><br />
    <label class="option"><input type="radio" name="option" value="wrong" class="option1">A</label>
    <label class="option"><input type="radio" name="option" value="wrong" class="option2">B</label>
    <label class="option"><input type="radio" name="option" value="wrong" class="option3">C</label>
    <label class="option"><input type="radio" name="option" value="wrong" class="option4">D</label>
    <label class="option"><input type="radio" name="option" value="right" class="option5">E</label>
    <br />
</form>

我如何使用 localStorage 保存人们选择的选项(“第一次点击”的项目、“最后一次点击”的项目、标题的项目、来自帖子而非窗口的链接的项目)？以及如何在侧边栏中将“第一次点击”显示为链接？像这样:

<a class="wrong" href="https://simulatorio.blogspot.com.br/2016/11/141602112016.html">Q141602112016</a>

<a class="right" href="https://simulatorio.blogspot.com.br/2014/10/042408102014.html">Q042408102014</a>

我知道这是一个如此复杂的项目，但我想要一些提示作为开始，因为我发现它很难实现。

一些例子: localStorage of Radio Button http://jsfiddle.net/TzPW9/315/

最佳答案

在您的 HTML 中，仅向每个表单添加 ID。

在 JS 中，我添加了设置、清除和检索本地存储信息的函数。

$(document).ready(function() {

    $("input[value='wrong']").click(function() {
        $(this).parent()
            .addClass("wrong")
            .siblings().removeClass("right wrong");

        $(this).prop('checked', true);
        $(this).closest('form').find("input[type='checkbox']").prop('checked', true);

        // Added this
        var form_id=$(this).closest('form').attr("id");
        var selection_class = $(this).attr("class");
        SaveSelection(form_id,selection_class);
    });

    $("input[value='right']").click(function() {
        $(this).parent()
            .addClass("right")
            .siblings().removeClass("right wrong");

        $(this).closest('form').find("input[type='checkbox']").prop('checked', true);

        // Added this
        var form_id=$(this).closest('form').attr("id");
        var selection_class = $(this).attr("class");
        SaveSelection(form_id,selection_class);
    });

    $("input[type='checkbox']").click(function() {
        //$(this).parent()
        //.siblings().removeClass("right wrong");

        if( $(this).prop("checked") == true) {
            return false;
        } else {
            $(this).closest('form').find("input[type='radio']").parent()
                .siblings().removeClass("right wrong");

            $(this).closest('form').find("input[type='radio']").prop('checked', false);

            // Added this
            var form_id = $(this).closest('form').attr("id");
            clearSelection(form_id);
        }
    });

    // Set a form's localStorage
    function SaveSelection(form_id,selection_class){
        console.log("Answered "+selection_class+" in form: "+form_id );
        localStorage.setItem(form_id, selection_class);
    }

    // Clear a form's localStorage
    function clearSelection(form_id){
        console.log("Clearing answer in form: "+form_id );
        localStorage.setItem(form_id, "");
    }

    // If some localStorage exist
    var form_amount = $("form").length;
    for(i=0;i<form_amount;i++){
        var stored = localStorage.getItem( $("form").eq(i).attr("id") );
        if( stored ){
            console.log("Retreiving answer for "+$("form").eq(i).attr("id")+" and simulate a click.");
            //console.log( $("form").eq(i).find("."+stored) );
            $("form").eq(i).find("."+stored).click();
        }
    }
});

参见CodePen

如果您需要解释，请随时询问...
;)

关于javascript - 如何使用localStorage保存radio并显示所有item，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40411018/

上一篇：javascript - 如何改进 VirtualList 中的列表项

下一篇：javascript - 数组中出现次数最多的或最先选择的

相关文章：

javascript - $locationProvider.html5Mode(true) 不适用于 tomcat

javascript - 如何切换链接(不是按钮)以显示和隐藏文本

java - 从 JSON 数组解析 JSON 对象

javascript - 如何使用 jQuery 从 JSON 读取文件？

javascript - Phantomjs:获取没有id的元素

javascript - 缺少一些试图将 Bootstrap 作为本地 git 子模块包含到 meteor 中的东西

javascript - 将数组名称添加到字符串并更新 - javascript

javascript - 使新元素匹配幻灯片 ui 设置

javascript - 如何在商业网站中合法使用 LGPL javascript？

php - 使用 PHP json_encode 解析错误

©2024 IT工具网  联系我们