4

記事の作成時にフィールドの表示を切り替えるためのワードプレスオプションのようなものを構築しようとしています。私が構築したのは$.click、対応するフィールド名で親を切り替える関数に依存しています。ボックスが実際にチェックされているかどうかではなく、クリックであるため、ボックスをオンにしてページをリロードします。前もって感謝します！

http://jsfiddle.net/zgrRd/1/

HTML

<input type="checkbox" name="title">
<span class="caption">Title</span>

<div class="hidden">
  <h2>Title</h2>
  <input type="text" name="title">
  <span class="caption">Lorem</span>
</div>

jQuery

$('input[type="checkbox"]').click(function(){
    var item = $(this).attr('name');
    $('input[name="'+item+'"][type="text"]').parent().toggle();
});
4

3 に答える 3

8

チェックボックスのチェック状態を外部から制御していると仮定すると...

デモ: http://jsfiddle.net/zgrRd/5/

言い換えれば、チェックボックスがどのような状態であっても、ページが読み込まれるときに評価されるため、ボックスがチェックされていない場合、対応する要素は最初から非表示になります。したがって、サーバー側でボックスをチェックする値を設定している場合、このクライアント側の JavaScript はそれを適切に評価する必要があります。

JavaScript

function evaluate(){
    var item = $(this);
    var relatedItem = $("#" + item.attr("data-related-item")).parent();

    if(item.is(":checked")){
        relatedItem.fadeIn();
    }else{
        relatedItem.fadeOut();   
    }
}

$('input[type="checkbox"]').click(evaluate).each(evaluate);

HTML

<input type="checkbox" data-related-item="title1">
<span class="caption">Title</span>

<div class="hidden">
  <h2>Title</h2>
  <input type="text" id="title1">
  <span class="caption">Lorem</span>
</div>
<hr>
<input type="checkbox" data-related-item="title2" checked>
<span class="caption">Title</span>

<div class="hidden">
  <h2>Title</h2>
  <input type="text" id="title2">
  <span class="caption">Lorem</span>
</div>

data-*属性の使用に注意してください。nameこれにより、あるフィールドの属性を使用して別のフィールドとの関係を示すことが回避されます。これらの属性には、接頭辞が付いている限り、好きな名前を付けることができますdata-。

于 2013-03-29T22:48:46.270 に答える
0

HTML

<input type="checkbox" id="cbxShowHide"/><label for="cbxShowHide">Show/Hide</label>
<div id="block">Some text here</div>

CSS

#block{display:none;background:#eef;padding:10px;text-align:center;}

ジャバスクリプト/jquery

$('#cbxShowHide').click(function(){
this.checked?$('#block').show(1000):$('#block').hide(1000); //time for show
});
于 2014-09-15T11:32:03.627 に答える
0

これは、 Jquery UI Save State Using Cookieだと思いますが、リロード間の状態を制御するために必要な欠落部分ですか?

于 2013-03-29T22:48:22.427 に答える