隐藏/显示子元素的onclick

这是我想做的事：

在每一部分，用人单位将显示和编辑表单将被隐藏。
当我点击“编辑雇主”按钮，编辑表单将显示与用人单位将被隐藏。

这里是我做过什么使用jQuery。当我点击“编辑雇主”按钮时，它不起作用。我不知道为什么这不起作用。

<!DOCTYPE html> 
<html> 
    <head> 
     <script 
    src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
    </head> 

    <body> 
     <div class="edit"> 
      <form class="editForm"> 
       employer: <input type="text" value="Citigroup" /> 
      </form> 
      <div class="contents">Employer: Citigroup</div> 
      <button class="editButton">Edit Employer</button> 
     </div> 

     <script> 
      $('div.edit').each(function(i) { 
       $(this).children('.editForm').hide(); 
      }) 
      $('div.edit').each(function() { 
       $(this).children('.editButton').click(function() { 
        $(this).children('.editForm').show(); 
        $(this).children('.contents').hide(); 
       }); 
      }) 
     </script> 
    </body> 
</html>

来源

2016-12-28 Zhuo

你的'this'内的点击处理程序不同于每个。在点击中，它指的是.editButton元素。 – Axnyff

'.editButton'没有孩子。事件处理程序中的$（this）'指的是被点击的按钮。使用'$（this）.siblings（'。editForm'）。show（）。siblings（'。contents）.hide（）' – Tushar

欢迎。避免使用'each'，jQuery为你做。 '$（'div.edit .editForm'）。hide（）;'或者更好，使用CSS来隐藏元素。并绑定事件'$（'div.edit .editButton'）。click（function（）{...}）;' – Tushar

的click函数内的$(this)包含$(this).children('.editButton')的本地实例。出于这个原因，你的代码没有找到任何.editForm元素。

对于这个工作，你可以做这样的事情：

<script> 
    $('div.edit').each(function(i) { 
     $(this).children('.editForm').hide(); 
    }) 
    $('div.edit').each(function() { 
     var $this = $(this); 
     $(this).children('.editButton').click(function() { 
      $this.children('.editForm').show(); 
      $this.children('.contents').hide(); 
     }); 
    }) 
</script>

如果我可以我会改善一些更多的变化代码：

<script> 
    $('.edit .editForm').hide(); // this will hide all instances of .editForm 
    $('.edit .editButton').click(function() { //assign 1 handler for all cases 
     $(this).siblings('.editForm').show(); // show the sibling edit form 
     $(this).siblings('.contents').hide(); // hide the sibling contents element 
    }); 
</script>

参考：兄弟选择：https://api.jquery.com/siblings/#siblings-selector

来源

2016-12-28 14:30:08

非常干净的解决方案。我喜欢。谢谢。 – Zhuo

@卓没有问题 –

很高兴我帮了你，如果你喜欢它接受它作为答案：P –

问题是单击处理指的是按钮，而不是div.edit内this。下面是解决这个问题的一种方法：

$('div.edit').each(function(i) { 
 
    $(this).children('.editForm').hide(); 
 
}); 
 
$('div.edit').each(function() { 
 
    var $self = $(this); 
 
    $(this).children('.editButton').click(function() { 
 
    $self.children('.editForm').show(); 
 
    $self.children('.contents').hide(); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="edit"> 
 
    <form class="editForm"> 
 
    employer: 
 
    <input type="text" value="Citigroup" /> 
 
    </form> 
 
    <div class="contents">Employer: Citigroup</div> 
 
    <button class="editButton">Edit Employer</button> 
 
</div>

来源

2016-12-28 14:14:04

并且此代码可以[改进]（http://stackoverflow.com/questions/41363783 /隐藏秀 - 子元素上单击功能于jQuery的＃comment69929040_41363783）。 “每个”都可以避免。 – Tushar

@Tushar如果我在页面上有很多部分（不同的雇主，学校），你如何避免每个部分？ – Zhuo

@卓已经在我的其他评论中解释过。 – Tushar

你并不需要使用.each()可言。只需在.editButton的类别上执行.click()事件并使用this查找其父项。如果你想做一个切换，你将不得不使用一个新的类或类似的东西来创建一个条件语句。

//This will hide *ANY* .editForm elements 
$('.editForm').hide(); 

//This will fire off of *ANY* editButton clicks. 
$('.editButton').click(function() { 
    var form = $(this).closest('.edit');    //Get the wrapper 
    if(form.hasClass('open')) {      //Check to see if it is open or not 
     form.removeClass('open').addClass('close'); //Toggle Classes 
     form.find('.editForm').show(); 
     form.find('.contents').hide(); 
    } else { 
     form.removeClass('close').addClass('open'); 
     form.find('.editForm').hide(); 
     form.find('.contents').show(); 
    } 
});

我喜欢使用比（分别）parent和childrenclosest和find更多。他们可以向上或向下走1层，并搜索层次结构以查找您正在查找的任何内容，而不是在单个层上向下或向下搜索parent和children。

如果您在DOM加载后插入你的.edit形式，你将需要点击事件绑定到文档

$(document).on('click', '.editButton', function() { 
    var form = $(this).closest('.edit'); 
    form.find('.editForm').hide(); 
    form.find('.contents').show(); 
});

来源

2016-12-28 14:17:48 ntgCleaner

隐藏/显示子元素的onclick

回答

相关问题