0

我刚刚开始使用 Jquery - 发现它非常酷且简单。我有一个小项目，我想将 jquery 应用到其中，但是我的代码变得丑陋且冗长，因此我正在寻求以下方面的帮助：

在加载此表单时，我想隐藏所有小节，然后当您从“类型”下拉列表中选择Flyer时，应出现Flyer fieldset 部分。当您从Type下拉列表中选择Banner时， Banner fieldset 部分应该会出现，而所有其他部分都会消失。

现在在横幅* fieldset * 中，如果您选择“ Size 1 ”复选框，则应该出现 Size 1 - Details 字段集，依此类推。

有人可以向我展示使用 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();
​

代码最初隐藏所有字段（倒数第二行调用更改事件来实现这一点，仅显示默认选择的选项），然后仅显示选择的内容。

此注释位检查在适当的字段集中检查了哪些复选框，.fs-type并重置相应.fs-size地显示哪些字段集。

我要补充一点，因为三个字段集之间唯一不同.fs-type的是标题，你可以只有一个字段集并简单地更改标题，例如

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

所有代码（除了上面的最后一行）都可以在 thie fiddle 中找到：http: //jsfiddle.net/YC7Xe/

编辑：我在这里为我的最后一条评论添加了演示：http: //jsfiddle.net/YC7Xe/1/。它还声明了两个函数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 回答