Question

好的，我正在使用JQUERY创建一个移动应用程序。这个应用程序有一个功能，个人可以参加评估考试，获得“真实”答案的数量，然后看到他们诊断的DIV。

在这种情况下，我有javascript隐藏并显示DIV并总计检查的数字或复选框。

我的问题：如果我在一个页面上完成评估，请进入另一个评估页面，总数显示上一次评估的总数。

我需要找到一种方法来为页面定义函数，或者在评估结束后清除值。我也无法弄明白。我确信答案非常简单直接。我真的很感激这方面的一些帮助！

这是我的javascript：

// The classes pertain to the DIVs that are shown or hid
//count is the total of checked boxes that is listed in the total text box 

$(document).ready(function () {
$("#class1").hide();
$("#class2").hide();
$("#class3").hide();
$("input[type='checkbox']").click(function () {
    var count = 0;
    $("input[type='checkbox']").each(function () {
        count += $(this).is(":checked") ? 1 : 0;
    });
    $("#class1").hide();
    count > 0 && count < 3 ? $("#class1").show().parent().show()
    : count > 2 && count < 9 ? $("#class2").show().parent().show()
    : count > 8 && count < 26 ? $("#class3").show().parent().show()
    : false;
    $("#TotalCheckedid").val(count);

     $("#class2").hide();
    count > 0 && count < 3 ? $("#class1").show().parent().show()
    : count > 2 && count < 9 ? $("#class2").show().parent().show()
    : count > 8 && count < 26 ? $("#class3").show().parent().show()
    : false;
    $("#TotalCheckedid").val(count);

     $("#class3").hide();
    count > 0 && count < 3 ? $("#class1").show().parent().show()
    : count > 2 && count < 9 ? $("#class2").show().parent().show()
    : count > 8 && count < 26 ? $("#class3").show().parent().show()
    : false;
    $("#TotalCheckedid").val(count); 
});
});



$(document).ready(function () {
$("#class4").hide();
$("#class5").hide();
$("#class6").hide();
$("input[type='checkbox']").click(function () {
    var count2 = 0;
    $("input[type='checkbox']").each(function () {
        count2 += $(this).is(":checked") ? 1 : 0;
    });
    $("#class4").hide();
    count2 > 0 && count2 < 3 ? $("#class4").show().parent().show()
    : count2 > 2 && count2 < 9 ? $("#class5").show().parent().show()
    : count2 > 8 && count2 < 26 ? $("#class6").show().parent().show()
    : false;
    $("#TotalCheckedidB").val(count2);

     $("#class5").hide();
    count2 > 0 && count2 < 3 ? $("#class4").show().parent().show()
    : count2 > 2 && count2 < 9 ? $("#class5").show().parent().show()
    : count2 > 8 && count2 < 26 ? $("#class6").show().parent().show()
    : false;
    $("#TotalCheckedidB").val(count2);

     $("#class6").hide();
    count2 > 0 && count2 < 3 ? $("#class4").show().parent().show()
    : count2 > 2 && count2 < 9 ? $("#class5").show().parent().show()
    : count2 > 8 && count2 < 26 ? $("#class6").show().parent().show()
    : false;
    $("#TotalCheckedidB").val(count2);
});
});

//

$(document).ready(function () {
$("#class7").hide();
$("#class8").hide();
$("#class9").hide();
$("input[type='checkbox']").click(function () {
    var count3 = 0;
    $("input[type='checkbox']").each(function () {
        count3 += $(this).is(":checked") ? 1 : 0;
    });
    $("#class7").hide();
    count3 > 0 && count3 < 3 ? $("#class7").show().parent().show()
    : count3 > 2 && count3 < 9 ? $("#class8").show().parent().show()
    : count3 > 8 && count3 < 26 ? $("#class9").show().parent().show()
    : false;
    $("#TotalCheckedidC").val(count3);

     $("#class8").hide();
    count3 > 0 && count3 < 3 ? $("#class7").show().parent().show()
    : count3 > 2 && count3 < 9 ? $("#class8").show().parent().show()
    : count3 > 8 && count3 < 26 ? $("#class9").show().parent().show()
    : false;
    $("#TotalCheckedidC").val(count3);

     $("#class8").hide();
    count3 > 0 && count3 < 3 ? $("#class7").show().parent().show()
    : count3 > 2 && count3 < 9 ? $("#class8").show().parent().show()
    : count3 > 8 && count3 < 26 ? $("#class9").show().parent().show()
    : false;
    $("#TotalCheckedidC").val(count3);
});
});

HTML示例：

<div data-role="content">
     <div data-role="fieldcontain">
        <fieldset data-role="controlgroup">

        <input type="checkbox" name="checkbox2_22" id="checkbox2_22" class="checkboxB" value="1" />
          <label for="checkbox2_22"></label>
        <input type="checkbox" name="checkbox2_23" id="checkbox2_23" class="checkboxB" value="1" />
          <label for="checkbox2_23"></label>

          <input type="checkbox" name="checkbox2_24" id="checkbox2_24" class="checkboxB" value="1" />
          <label for="checkbox2_24"></label>

          <input type="checkbox" name="checkbox2_25" id="checkbox2_25" class="checkboxB" value="1" />
          <label for="checkbox2_25"></label>

        </fieldset>
        <p>Total<input type="text" name"TotalChecked" id="TotalCheckedidB" size"10" readonly="readonly" /></p>
     </div>
   <div data-role="collapsibleset" data-theme="a" data-content-theme="a">

        <div data-role="collapsible" class="class4" id="class4">
            <h3> Total 0 - 2 </h3> 
         <p>  If you indicted "yes" on less than three questions then you may not have a problem with alcohol </p>
         </div></div>
    <div data-role="collapsible" class="class5" id="class5">
        <h3> Total 3 - 8 </h3>
        <p> If you scored between 3 - 8 you are showing signs of possible alcohol dependence and should consider meeting with a professional who can further evaluate your alcohol problems. </p>
        </div>
    <div data-role="collapsible"class="class6" id="class6">
    <h3> Total 9 - 25 </h3>
    <p> If you answered "yes" to more than 8 questions then you may have a serious level of alcohol-related problems requiring treatment. You should seek immediate professional guidance. </p>
    </div>         
    </div>

Answer 1

您似乎对存储值的方式感兴趣，这可能对您正在开发的测验/评分程序类型非常有用。我可以建议在这里查看localstorage（和其他存储选项）：https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Storage?redirectlocale=en-US&redirectslug=Web%2FGuide%2FDOM%2FStorage

您可以为您感兴趣的变量指定特定键，然后随时加载它们。

- 编辑：现在我得到了你说的话。我自己是初学者，但是这个怎么样？ javascript before leaving the page 它建议使用onunload，在这个函数中你应该能够重置变量。

JQUERY＆amp; Javascript移动到单独的函数或清除变量

1 个答案: