javascript - 清除父字段集中的文本框

Question

我正在使用这个"Fancy Slider"插件的工作原理基本上是并排设置多个字段集。由于每个字段集都是同一类的成员，因此我试图找到为每个表单添加清除按钮的最简单方法，并使用 jQuery 单独清除该特定表单中的输入字段。

我尝试使用 .parent()、.parents() 和 .closest() 来隔离用户的字段集正在努力但没有运气。虽然我可以清除正在处理的表单，但我最终会清除应用程序中每个字段集中的表单。我们经常使用 jQuery，所以我对此还比较陌生。有任何想法吗？

jQuery

    $('#clearButton').click(function() {
        $(this).closest('fieldset').find('input:text').val('');
        $('#Pensgc').attr('readonly', false);
    });

Razor 示例

<fieldset class="step">
    <legend>Display Exceptions</legend>
    <center>
        <table id="ExceptionEditing">
            <thead>
                <tr>
                    <th>Exception Name</th>
                    <th>Starting Letter</th>
                    <th></th>
                    <th></th>
                </tr>
            </thead>
            <tbody>
                @for (int i = 0; i < Model.ExceptionList.Count(); i++)
                {
                    <tr id="@Model.ExceptionList[i].Id">
                        <td>
                            @Html.TextBoxFor(anything => Model.ExceptionList[i].ExceptionName, new {style = "width:300px;", @readonly = "readonly", maxlength=255 })
                        </td>
                        <td style="padding-left:30px;" class="EditStartingLetter">
                            @Html.TextBoxFor(anything => Model.ExceptionList[i].StartingLetter, new {style = "width:10px;", @readonly = "readonly", maxlength=1 })
                        </td>
                        <td style="padding-left:10px;">
                            <a href="#" class="editException">Edit</a>
                        </td>
                        <td style="padding-left:10px;">
                            <a href="#" class="deleteException">Delete</a>
                        </td>
                    </tr>
                }
            </tbody>
        </table>
    </center>
</fieldset>
<fieldset class="step">
    <center>
        <legend>Create Exception</legend>
        <table>
            <tr>
                <td>
                    <div class="editor-label">
                        @Html.LabelFor(model => model.createExceptionName)
                    </div>
                    <div class="editor-field">
                        @Html.TextBoxFor(model => model.createExceptionName, new { @class="AlphaNumOnly", maxlength=255 })
                    </div>
                </td>
                <td>
                    <div class="editor-label">
                        @Html.LabelFor(model => model.createExceptionLetter)
                    </div>
                    <div class="editor-field">
                        @Html.TextBoxFor(model => model.createExceptionLetter, new { @class="AlphaNumOnly", maxlength=1 })
                    </div>
                </td>
            </tr>
        </table>
        <button type="submit" class="submitButton">Submit</button>
        <button type="submit" class="clearButton">Clear</button>
    </center>
</fieldset>

编辑

这是一个工作 fiddle :http://jsfiddle.net/rZa2j/

Answer 1

阅读文档后，我在他们的 JavaScript 中发现了以下行:

current = $this.parent().index() + 1;

其中 $this 指的是单击的。这意味着:如果打开第二个选项卡，则 current 将为 1。

var fieldsetCount = $('#formElem').children().length;

这就是他们检索幻灯片数量的方式。 通过将所有内容放在一起，您可以使用以下代码获取当前字段集:

var currentFieldsetIndex = $(".selected").index();
var $currentFieldset = $("#formElem").children().eq(currentFieldsetIndex);

然后你可以扩展你的功能

$currentFieldset.find("input:text").val("");