Question

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

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

的jQuery

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

示例剃刀

<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>

修改

这是一个工作小提琴：http://jsfiddle.net/rZa2j/

Answer 1

阅读完文档后，我在他们的JavaScript中找到了以下行：

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

用$ this指的是点击的。这意味着：如果打开第二个选项卡，则当前将为1。

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

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

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

然后你可以用

扩展你的功能

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

Answer 2

刚刚意识到我已将type属性设置为reset。从来没有使用过这个，但是删除它解决了问题。

<button class="clearButton">Clear</button>

父字段集中的明文框

2 个答案: