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

嗨，我有以下的HTML代码，我想用类editfield和editfieldlink链接隐藏div，并用class值显示div。我尝试了下面的jQuery代码，它并没有为我工作。但是，如果我隐藏像这样的语句$（this）.closest（'div.editfield'）。parent（）。hide（）;如何通过点击jQuery中的子按钮来隐藏父元素

<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(); 

});

}）;

来源

2013-03-20 ali asad

哪里是使用id = “settingseditor” 的元素？ – 2013-03-20 13:58:52

@GeorgeBoot这显然是一个父母，比他已经显示的''更深的DOM – Bill 2013-03-20 14:00:06

你就是不能正确地遍历

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

来源

2013-03-20 14:09:46

感谢兄弟。其实我也是为父div分配事件处理程序，它被继承到这个按钮，所以这是行不通的。 – 2013-03-21 11:11:00

试试父母（）。

$('#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

来源

2013-03-20 13:58:57 bipen

这对我不起作用:( – 2013-03-20 14:06:30

不知道从哪里id为#settingseditor生活中的元素，但它为我，如果我找的只是.cancelactionsettings元素

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

jsFiddle

来源

2013-03-20 13:59:33 Gabe

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

看到这个fiddle的工作示例

来源

2013-03-20 14:00:18 Bigood

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

回答

相关问题