0

そのため、チェックボックスがオンになっていない限り、読み込み時に非表示になっている div がたくさんあります。

これは変更イベントで機能しますが、ページを更新すると、チェックボックスをオフにしてからオンに戻さない限り、div は非表示に戻ります。

チェックを入れたり外したりするのではなく、ロード時にどのチェックボックスがチェックされているかを確認してからdisplay:blockする方法があるかどうか疑問に思っていました。

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

ページを読み込むたびに DOM が消去されるため、一時データを Cookie に保存する必要があります。

于 2012-09-27T12:24:20.840 に答える
0

イベント ハンドラー関数のロジックがchange既に正しく機能している場合は、ページが読み込まれたとき (バインドされた後) にそのイベント ハンドラーをトリガーするだけです。

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

無関係なメモとして、三項演算子は通常、実行を分岐するのではなく、条件に基づいて値を格納または渡すために使用されます (それがifステートメントの目的です)。コードは機能しますが、JSLint などのツールを使用して実行するとエラーが発生するだけで、エラーが発生します。

于 2012-09-27T12:13:56.813 に答える
0

すべてのチェック ボックス オプションに対して Cookie を作成する必要があります。

たとえば、1 つのオプションをオンにして DIV が表示されるようになった場合、その DIV の Cookie を作成し、その DIV に関連するものと呼び、その内容を true のようにオンであることを関連付けるものに設定します。

次に、ページをリロードするときに、その Cookie が存在し、それが content = true であり、スタイル表示がその特定の DIV のブロックに設定されているかどうかを php で確認します。

可視性をオフにするには、Cookie の時間を -x 秒に設定して期限切れにするか、Cookie の内容を false に更新します。

これらのチェックボックスをクリックした同じページでJavaScriptを使用してCookieを作成できます。リロードする必要はありません。

于 2012-09-27T12:16:57.920 に答える