0

Jquery を使い始めたばかりです。とてもクールで簡単です。私はjqueryを適用したい小さなプロジェクトを持っていますが、私のコードは醜くて長くなってしまったので、次のことについて助けを求めています:

このフォームの onload すべてのサブセクションを非表示にしたい場合、[タイプ] ドロップダウンから[チラシ] を選択すると、[チラシ]フィールドセット セクションが表示されます。[タイプ] ドロップダウンから[バナー]を選択すると、[バナー]フィールドセット セクションが表示され、他のすべてが非表示になります。

バナー*フィールドセット* で、「サイズ 1」チェックボックスを選択すると、サイズ 1 - 詳細フィールドセットが表示されます 。

誰かがjqueryでこれを達成する最もクリーンで効率的な方法を教えてもらえますか?

<form action="" method="post">
<fieldset name="fs_mainInfo">
                <legend>Main Info</legend>

                <table style="width: 100%">
                    <tr>
                        <td style="width: 255px"><label id="Label1">First Name</label></td>
                        <td><input id="fname" name="fname" type="text" /></td>
                    </tr>
                    <tr>
                        <td style="width: 255px">Last Name</td>
                        <td><input id="lname" name="lname" type="text" /></td>
                    </tr>
                    <tr>
                        <td style="width: 255px"><label id="Label2">Type</label></td>
                        <td><select id="jobType" name="jobType">
                        <option value="Flyer">Flyer</option>
                        <option value="Banner">Banner</option>
                        <option value="Postcard">Postcard</option>
                        </select></td>
                    </tr>
                    <tr>
                        <td style="width: 255px">&nbsp;</td>
                        <td>&nbsp;</td>
                    </tr>
                </table>

            </fieldset>
            <fieldset name="fs_flyer" id="fs_flyer">
                <legend style="color:blue">Flyer</legend>
                <table style="width: 100%">
                    <tr>
                        <td style="width: 188px"><label id="Label1">Sizes:</label></td>
                        <td><input id="flyerSize[]" name="flyerSize[]" type="checkbox" value="Size 1" />Size 1<br/>
                        <input id="flyerSize[]"  name="flyerSize[]" type="checkbox" value="Size 2"  />Size 2<br/>
                        <input id="flyerSize[]"  name="flyerSize[]" type="checkbox" value="Size 3"  />Size 3<br/>
                                                </td>
                    </tr>
                </table>

            </fieldset>
<fieldset name="fs_banner" id="fs_banner">
                <legend   style="color:blue">Banner</legend>
                <table style="width: 100%">
                    <tr>
                        <td style="width: 188px"><label id="lblBannerSize">Sizes:</label></td>
                        <td><input id="bannerSize[]" name="bannerSize[]" type="checkbox" value="Size 1" />Size 1<br/>
                        <input id="bannerSize[]"  name="bannerSize[]" type="checkbox" value="Size 2"  />Size 2<br/>
                        <input id="bannerSize[]"  name="bannerSize[]" type="checkbox" value="Size 3"  />Size 3<br/>
                                                </td>
                    </tr>
                </table>

            </fieldset>

<fieldset name="fs_postcard" id="fs_postcard">
                <legend  style="color:blue">Postcard</legend>
                <table style="width: 100%">
                    <tr>
                        <td style="width: 188px"><label id="lblPostcardSize">Sizes:</label></td>
                        <td><input id="postcardSize[]" name="postcardSize[]" type="checkbox" value="Size 1" />Size 1<br/>
                        <input id="postcardSize[]"  name="postcardSize[]" type="checkbox" value="Size 2"  />Size 2<br/>
                        <input id="postcardSize[]"  name="postcardSize[]" type="checkbox" value="Size 3"  />Size 3<br/>
                                                </td>
                    </tr>
                </table>

            </fieldset>

<fieldset name="fs_flyer_desc1" id="fs_flyer_desc1">
                <legend  style="color:maroon">Size 1 - Details</legend>
                <table style="width: 100%">
                    <tr>
                        <td style="width: 188px"><label id="lblFlyerDescription">Description:</label></td>
                        <td><textarea name="TextArea1" cols="30" rows="5"></textarea>
                        </td>
                    </tr>
                </table>

            </fieldset>
            <fieldset name="fs_flyer_desc2" id="fs_flyer_desc2">
                <legend  style="color:maroon">Size 2 - Details</legend>
                <table style="width: 100%">
                    <tr>
                        <td style="width: 188px"><label id="lblFlyerDescription2">Description:</label></td>
                        <td><textarea name="sizeOneDesc2" id="sizeOneDesc2" cols="30" rows="5"></textarea>
                        </td>
                    </tr>
                </table>

            </fieldset>
            <fieldset name="fs_flyer_desc3" id="fs_flyer_desc3">
                <legend style="color:maroon">Size 3 - Details</legend>
                <table style="width: 100%">
                    <tr>
                        <td style="width: 188px"><label id="lblFlyerDescription3">Description:</label></td>
                        <td><textarea name="sizeOneDesc3" id="sizeOneDesc3" cols="30" rows="5"></textarea>
                        </td>
                    </tr>
                </table>

            </fieldset>
</form>
4

2 に答える 2

2

マークアップを少し変更して、もう少しメタデータが含まれるようにしました。あなたの質問に対する簡単な回答をモックアップしました。

主に、サイズとタイプに関連するフィールドをそれぞれ含むフィールドセットにクラスfs-sizeとを追加しました。fs-typeそれはあなたがCSSセレクターのグループとしてそれらを素早く参照することを可能にします-例えば$('.fs-size').hide()

次に、使用する実際の値を反映するように要素の値を変更しまし<input/>た<select/>（value="1"選択value="Size 1"した値を使用して表示する値を選択する必要がある場合に、解析を行う必要がなくなります<fieldset/>。

<form action="" method="post">
<fieldset name="fs_mainInfo">
                <legend>Main Info</legend>

                <table style="width: 100%">
                    <tr>
                        <td style="width: 255px"><label id="Label1">First Name</label></td>
                        <td><input id="fname" name="fname" type="text" /></td>
                    </tr>
                    <tr>
                        <td style="width: 255px">Last Name</td>
                        <td><input id="lname" name="lname" type="text" /></td>
                    </tr>
                    <tr>
                        <td style="width: 255px"><label id="Label2">Type</label></td>
                        <td><select id="jobType" name="jobType">
                        <option value="flyer">Flyer</option>
                        <option value="banner">Banner</option>
                        <option value="postcard">Postcard</option>
                        </select></td>
                    </tr>
                    <tr>
                        <td style="width: 255px">&nbsp;</td>
                        <td>&nbsp;</td>
                    </tr>
                </table>

            </fieldset>
            <fieldset name="fs_flyer" id="fs_flyer" class="fs-type">
                <legend style="color:blue">Flyer</legend>
                <table style="width: 100%">
                    <tr>
                        <td style="width: 188px"><label id="Label1">Sizes:</label></td>
                        <td><input id="flyerSize[]" name="flyerSize[]" type="checkbox" value="1"   class="input-size"/>Size 1<br/>
                        <input id="flyerSize[]"  name="flyerSize[]" type="checkbox" value="2"   class="input-size" />Size 2<br/>
                        <input id="flyerSize[]"  name="flyerSize[]" type="checkbox" value="3"   class="input-size" />Size 3<br/>
                                                </td>
                    </tr>
                </table>

            </fieldset>
<fieldset name="fs_banner" id="fs_banner" class="fs-type">
                <legend   style="color:blue">Banner</legend>
                <table style="width: 100%">
                    <tr>
                        <td style="width: 188px"><label id="lblBannerSize">Sizes:</label></td>
                        <td><input id="bannerSize[]" name="bannerSize[]" type="checkbox" value="1"  class="input-size" />Size 1<br/>
                        <input id="bannerSize[]"  name="bannerSize[]" type="checkbox" value="2"  class="input-size" />Size 2<br/>
                        <input id="bannerSize[]"  name="bannerSize[]" type="checkbox" value="3" class="input-size" />Size 3<br/>
                                                </td>
                    </tr>
                </table>

            </fieldset>

<fieldset name="fs_postcard" id="fs_postcard" class="fs-type">
                <legend  style="color:blue">Postcard</legend>
                <table style="width: 100%">
                    <tr>
                        <td style="width: 188px"><label id="lblPostcardSize">Sizes:</label></td>
                        <td><input id="postcardSize[]" name="postcardSize[]" type="checkbox" value="1" class="input-size"/>Size 1<br/>
                        <input id="postcardSize[]"  name="postcardSize[]" type="checkbox" value="2"   class="input-size"/>Size 2<br/>
                        <input id="postcardSize[]"  name="postcardSize[]" type="checkbox" value="3"  class="input-size" />Size 3<br/>
                                                </td>
                    </tr>
                </table>

            </fieldset>

<fieldset name="fs_flyer_desc1" id="fs_flyer_desc1"  class="fs-size">
                <legend  style="color:maroon">Size 1 - Details</legend>
                <table style="width: 100%">
                    <tr>
                        <td style="width: 188px"><label id="lblFlyerDescription">Description:</label></td>
                        <td><textarea name="TextArea1" cols="30" rows="5"></textarea>
                        </td>
                    </tr>
                </table>

            </fieldset>
            <fieldset name="fs_flyer_desc2" id="fs_flyer_desc2"  class="fs-size">
                <legend  style="color:maroon">Size 2 - Details</legend>
                <table style="width: 100%">
                    <tr>
                        <td style="width: 188px"><label id="lblFlyerDescription2">Description:</label></td>
                        <td><textarea name="sizeOneDesc2" id="sizeOneDesc2" cols="30" rows="5"></textarea>
                        </td>
                    </tr>
                </table>

            </fieldset>
            <fieldset name="fs_flyer_desc3" id="fs_flyer_desc3"  class="fs-size">
                <legend style="color:maroon">Size 3 - Details</legend>
                <table style="width: 100%">
                    <tr>
                        <td style="width: 188px"><label id="lblFlyerDescription3">Description:</label></td>
                        <td><textarea name="sizeOneDesc3" id="sizeOneDesc3" cols="30" rows="5"></textarea>
                        </td>
                    </tr>
                </table>

            </fieldset>
</form>​​​​​​​​​

そうすれば、私がコメントしたビットを除いて、コードはかなり単純になります。

$('#jobType').change(function() {
    $('.fs-type').hide();
    $('#fs_' + this.value).show();

    // this was a bit tricky for me at first
    // hide all sizes and show only sizes previously selected
    // for this type
    $('.fs-size').hide();
    $('#fs_' + this.value + ' .input-size:checked').each(function(i, el) {
        $('#fs_flyer_desc' + el.value).show();
    });
});
$('.input-size').change(function() {
    var el = $('#fs_flyer_desc' + this.value);
    if (this.checked) {
      el.show();    
    }
    else {
      el.hide();    
    }
});
$('#jobType').change();
$('.fs-size').hide();
​

コードは最初にすべてのフィールドを非表示にし（最後から2番目の行がchangeイベントを呼び出してこれを実現し、デフォルトで選択されたオプションのみを表示します）、次に選択されたもののみを表示します。

このコメント付きビットは、適切なフィールドセット内でチェックされているチェックボックスをチェックし、それに応じて表示されるフィールド.fs-typeセットをリセットします。.fs-size

.fs-typeコメントとして、3つのフィールドセット間で異なるのはタイトルだけなので、フィールドセットを1つだけにして、キャプションを変更するだけでよいことをコメントとして追加します。

$('#jobType').change(function() { $('.fs-type legend').html($(this).html()); });

すべてのコード（上記の最後の行を除く）は、フィドルで入手できます：http: //jsfiddle.net/YC7Xe/

編集：最後のコメントのデモをここに追加しました：http：//jsfiddle.net/YC7Xe/1/。また、コードの重複を減らすために、 2つの関数updateType()を宣言します。updateSize()

于 2012-04-06T20:32:53.510 に答える
0

これを試してください。

$(document).ready(function(){

 $("#jobType").change(function() {

      $("#fs_flyer, #fs_banner, #fs_postcard").hide();

       if ( $("#jobType").val() == "Flyer") {
           $("#fs_flyer").show();               

        } else if ( $("#jobType").val() == "Banner") {
              $("#fs_banner").show();

        }  else if ( $("#jobType").val() == "Postcard") {
              $("#fs_postcard").show();

        }      
 });
});
于 2012-04-06T21:00:59.353 に答える