Question

您好我有以下HTML代码，我想隐藏div与类editfield和editfieldlink链接，并显示div与类值。我试着遵循它不适合我的jQuery代码。但是如果我像这样的语句隐藏一个父，那就行了。$（this）.closest（'div.editfield'）。parent（）。hide（）;

<tr class="row-fluid settingsrow">
                <td class="span2">
                    <strong>Name</strong>
                </td>

                <td class="span8">
                <div class="value">ALI ASAD</div>
                <div class="editfield">
                    <form class="form-vertical">         
                        <div class="control-group">
                            <label class="control-label">First Name</label>
                            <div class="controls">
                                <input type="text" name="firstname" id="firstname" placeholder="Ali">
                            </div>
                        </div>

                        <div class="control-group">
                            <label class="control-label">Last Name</label>
                            <div class="controls">
                                <input type="text" name="lastname" placeholder="Asad">
                            </div>
                        </div>
                        <div class="control-group">
                            <div class="controls">
                                <button type="submit" class="btn btn-primary btn-mini">Save Changes</button>
                                <button class="btn btn-inverse btn-mini cancelactionsettings">Cancel</button>
                            </div>
                        </div>
                    </form> 
                </div>
                </td>
                <td class="span1"><a href="#" class="editfieldlink" style="text-decoration:none"><small>Edit</small></a></td>
            </tr>

我的Java脚本就像

$(document).ready(function(e) 
{
$('#settingseditor .cancelactionsettings').click(function(event)
{
    event.preventDefault();

    $(this).closest('div.editfield').hide();
    $(this).closest('div.value').show();
    $(this).closest('a.editfieldlink').hide();

});

}）;

Answer 1

尝试父母（）。

$('#settingseditor .cancelactionsettings').click(function(event)
{
  event.preventDefault();

  $(this).parents('div.editfield').hide();
  $(this).parents('div.editfield').prev().show();
  $(this).parents('td.span8').next().find('a.editfieldlink');

});

注意：我在你的代码中没有找到#settingseditor ....如果你想尝试使用multiselecter，那么你忘记了,运算符......

$('#settingseditor , .cancelactionsettings').click(... //---------------^^^^--- here

Answer 2

你没有正确穿越

$(document).ready(function (e) {
    $('#settingseditor .cancelactionsettings').click(function (event) {
        event.preventDefault();
        $(this).closest('div.editfield').hide();
        $(this).closest('div.editfield').prev('.value').show(); // .value is a prev sibling of div.editfield
        $(this).closest('td').next().find('a.editfieldlink').hide();// anchor is in the next sibling td
    });
});

fiddle

Answer 3

不确定ID为#settingseditor的元素在哪里，但如果我只查找.cancelactionsettings元素

，它对我有用

$('#settingseditor, .cancelactionsettings').click(function(event)
{
   ...
}

jsFiddle

Answer 4

您的选择器与任何元素都不匹配;将此$('#settingseditor .cancelactionsettings')更改为$('.cancelactionsettings')。

有关工作示例，请参阅此fiddle

如何通过单击jQuery中的子按钮来隐藏父元素

4 个答案: