Question

所以除非选中复选框，否则我会在加载时隐藏一堆div。

它适用于更改事件，但在刷新页面时，除非您关闭复选框然后重新打开，否则div会返回隐藏状态。

我想知道是否有办法检查加载时勾选了哪个复选框，然后显示：阻止，而不是勾选和解开。

HTML / PHP

<div class="misc-pub-section">
    <label><b>Year of release</b></label>
    <input name="review_release_year" value="<?php echo $review_release_year; ?>" />
</div>

<div class="misc-pub-section">
    <label><b>Director/Author/Company/Developer</b></label>
    <input name="review_owner" value="<?php echo $review_owner; ?>" />
</div>

<div class="misc-pub-section">
    <label><b>Generic Website Link</b></label>
    <input name="review_website_link" value="<?php echo $review_website_link; ?>" />
</div>

<div class="misc-pub-section feature-short-webseries" style="display:none;">
    <label><b>IMDb Title Link</b></label><br/>
    <em style="color: #999;">imdb.com/title/</em><input size="9" name="review_imdb_link" value="<?php echo $review_imdb_link; ?>" />
</div>

<div class="misc-pub-section feature-short-webseries" style="display:none;">
    <label><b>Story rating (out of 5)</b></label>
    <input max="5" name="review_story_rating" value="<?php echo $review_story_rating; ?>" />
</div>

<div class="misc-pub-section feature-short-webseries-videogame" style="display:none;">
    <label><b>Enjoyment rating (out of 5)</b></label>
    <input max="5" name="review_enjoy_rating" value="<?php echo $review_enjoy_rating; ?>" />
</div>

<div class="misc-pub-section feature-short" style="display:none;">
    <label><b>Soundtrack rating (out of 5)</b></label>
    <input max="5" name="review_sound_rating" value="<?php echo $review_sound_rating; ?>" />
</div>

<div class="misc-pub-section webseries" style="display:none;">
    <label><b>Attention span rating (out of 5)</b></label>
    <input max="5" name="review_span_rating" value="<?php echo $review_span_rating; ?>" />
</div>

<div class="misc-pub-section hardware-software" style="display:none;">
    <label><b>Features rating (out of 5)</b></label>
    <input max="5" name="review_features_rating" value="<?php echo $review_features_rating; ?>" />
</div>

<div class="misc-pub-section hardware-software" style="display:none;">
    <label><b>Function rating (out of 5)</b></label>
    <input max="5" name="review_function_rating" value="<?php echo $review_function_rating; ?>" />
</div>

<div class="misc-pub-section hardware-software" style="display:none;">
    <label><b>Value rating (out of 5)</b></label>
    <input max="5" name="review_value_rating" value="<?php echo $review_value_rating; ?>" />
</div>

<div class="misc-pub-section software" style="display:none;">
    <label><b>Operating System</b></label>
    <input name="review_system_rating" value="<?php echo $review_system_rating; ?>" />
</div>

<div class="misc-pub-section videogame" style="display:none;">
    <label><b>Graphics rating (out of 5)</b></label>
    <input max="5" name="review_graphics_rating" value="<?php echo $review_graphics_rating; ?>" />
</div>

<div class="misc-pub-section videogame" style="display:none;">
    <label><b>Gameplay rating (out of 5)</b></label>
    <input max="5" name="review_gameplay_rating" value="<?php echo $review_gameplay_rating; ?>" />
</div>

的jQuery

$(function() {
    var a = $("#in-review-type-14"), b = $("#in-review-type-67"), f = $("#in-review-type-68"), d = $("#in-review-type-69"), e = $("#in-review-type-70"), c = $("#in-review-type-71"), h = $("#review-typechecklist input");
  $(h).change(function() {
    a.is(":checked") || b.is(":checked") || c.is(":checked") ? $(".feature-short-webseries").show() : $(".feature-short-webseries").hide();
    a.is(":checked") || b.is(":checked") || c.is(":checked") || e.is(":checked") ? $(".feature-short-webseries-videogame").show() : $(".feature-short-webseries-videogame").hide();
    a.is(":checked") || b.is(":checked") ? $(".feature-short").show() : $(".feature-short").hide();
    c.is(":checked") ? $(".webseries").show() : $(".webseries").hide();
    f.is(":checked") || d.is(":checked") ? $(".hardware-software").show() : $(".hardware-software").hide();
    d.is(":checked") ? $(".software").show() : $(".software").hide();
    e.is(":checked") ? $(".videogame").show() : $(".videogame").hide()
  })
});

Answer 1

如果change事件处理函数的逻辑已经正常工作，您需要做的就是在页面加载时（绑定后）触发该事件处理程序：

$(h).change(function() {
    ...
}).trigger('change');

在一个不相关的注释中，三元运算符通常用于根据条件存储或传递值，而不是分支执行（这是if语句的用途）。你的代码会起作用，如果你通过像JSLint这样的工具运行它会产生错误，它会抱怨它。

Answer 2

您需要为每个复选框选项创建Cookie。

例如，如果您选中一个选项并且DIV现在可见，则为该DIV创建cookie，将其调用与该DIV相关的内容，并将其内容设置为将其关联为正确的内容。

然后当重新加载页面检查php时，如果该cookie存在且它的内容= true，并且该设置样式是否显示为该特定DIV的块。

要关闭可见性，您可以将Cookie时间设置为-x秒以使其过期，或将Cookie内容更新为false。

你可以在你点击那些复选框的同一页面上使用javascript制作cookie，而不需要重新加载。

Answer 3

每次加载页面都会删除DOM，因此您必须将临时数据保存在Cookie中。

加载隐藏的div与复选框加载

3 个答案: