0

因此,除非选中复选框,否则我有一堆在加载时隐藏的 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()
  })
});
4

3 回答 3

0

如果事件处理函数的逻辑change已经正常工作,您需要做的就是在页面加载时触发该事件处理程序(在它被绑定之后):

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

在不相关的注释中,三元运算符通常用于基于条件存储或传递值,而不是分支执行(这就是if语句的用途)。您的代码可以工作,如果您通过 JSLint 之类的工具运行它,您只会得到错误,它会抱怨它。

于 2012-09-27T12:13:56.813 回答
0

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

例如,如果您选中一个选项并且 DIV 现在可见,则为该 DIV 创建 cookie,将其命名为与该 DIV 相关的内容,并将其内容设置为与您相关联的内容,即它像真一样为 ON。

然后在 php 中重新加载页面时检查该 cookie 是否存在并且它的 content = true 以及是否设置样式显示以阻止该特定 DIV。

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

您可以在单击那些复选框的同一页面上使用 javascript 制作 cookie,无需重新加载。

于 2012-09-27T12:16:57.920 回答
0

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

于 2012-09-27T12:24:20.840 回答