Question

我在动态创建的表中有两个div。

 <td>
  <div class='pane1 display'>
      <a href='#' id='part1'><span class='add_field'>Add field</span></a>
  </div>
  <div class='pane2 hidee'>
  </div>
 </td>

我希望在点击该表的“添加”字段时将这两个类的名称改组为

<td>
  <div class='pane1 hide'>
      <a href='#' id='part1'><span class='add_field'>Add field</span></a>
  </div>
  <div class='pane2 display'>
  </div>
 </td>

我试过这个

$('.entity_table').on('click', '.add_field', function(events){

   $(this).parent().removeClass('display');
   $(this).parent().addClass('hide')
   $(this).parents('td div.pane2').removeClass('hide');
   $(this).parents('td div.pane2').addClass('display');

});

不能使用document.getElementbyid cus我必须填充单击它的表的类。

感谢名单

Answer 1

像这样使用：

$(this).closest('[class^=pane]').toggleClas('display hide');

说明

.closest('[class^=pane]')
// select closest div which is starting with pane 
//don't use just parent as it will select the a tag in your html

.toggleClass('display hide') 
// if it is display then it removes display class and adds hide class 
//   and vice versa

Answer 2

您指向span标记的父级（您设置事件监听器的标记），它是a标记。您想要访问a代码的父级...

所以你想获得被点击的元素的父元素的父元素：

$('.entity_table').on('click', '.add_field', function(events){

   var $pane1 = $(this).parent().parent(); // store the jquery element for performance and readability matter
   $pane1.removeClass('display').addClass('hide'); // toggle pane1 classes
   $pane1.next('.pane2').removeClass('hide').addClass('display'); //toggle pane2 classes

});

Answer 3

$('.entity_table').on('click', '.add_field', function (events) {
    var th = this,
        td = $(th).closest('td'),
        display = $(td).find('.display'),
        hide = $(td).find('.hide');
    $(display).toggleClass('display hide');
    $(hide).toggleClass('display hide');
});

请在此处查看DEMO。

洗牌两个div

3 个答案: