Javascript 隐藏/显示子元素onClick_Javascript_Jquery

Javascript 隐藏/显示子元素onClick

javascript jquery

Javascript 隐藏/显示子元素onClick,javascript,jquery,Javascript,Jquery,我正在建立一个“编辑配置文件”页面以下是我想做的：在每个部分中，将显示雇主，并隐藏编辑表单当我点击“编辑雇主”按钮时，编辑表单将显示，雇主将被隐藏下面是我使用jQuery所做的。当我点击“编辑雇主”按钮时，它不起作用。我不知道这为什么不起作用 <!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery

我正在建立一个“编辑配置文件”页面

以下是我想做的：

在每个部分中，将显示雇主，并隐藏编辑表单

当我点击“编辑雇主”按钮时，编辑表单将显示，雇主将被隐藏

下面是我使用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>


雇主：
雇主：花旗集团
编辑雇主
$（'div.edit'）。每个（函数（i）{
$（this.children（'.editForm'）.hide（）；
})
$（'div.edit'）。每个（函数（）{
$（this）.children（'.editButton'）。单击（function（）{
$（this.children（'.editForm'）.show（）；
$（this.children（'.contents'）.hide（）；
});
})

问题在于点击处理程序中引用按钮的

此

，而不是

div.edit

。有一种方法可以解决这个问题：

$（'div.edit'）。每个（函数（i）{
$（this.children（'.editForm'）.hide（）；
});
$（'div.edit'）。每个（函数（）{
var$self=$（本）；
$（this）.children（'.editButton'）。单击（function（）{
$self.children（'.editForm'）.show（）；
$self.children（'.contents'）.hide（）；
});
});

雇主：
雇主：花旗集团
编辑雇主
问题在于点击处理程序中引用按钮的此
，而不是div.edit
。有一种方法可以解决这个问题：

$（'div.edit'）。每个（函数（i）{
$（this.children（'.editForm'）.hide（）；
});
$（'div.edit'）。每个（函数（）{
var$self=$（本）；
$（this）.children（'.editButton'）。单击（function（）{
$self.children（'.editForm'）.show（）；
$self.children（'.contents'）.hide（）；
});
});

雇主：
雇主：花旗集团
编辑雇主
您根本不需要使用.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();
    }
});

我喜欢使用最近的
和查找
而不是父项
和子项
（分别）。他们可以向上或向下搜索多个层，并在层次结构中搜索您要查找的内容，而不是向上或向下搜索单个层
如果在加载DOM后插入.edit
表单，则需要将单击事件绑定到文档
$(document).on('click', '.editButton', function() {
    var form = $(this).closest('.edit');
    form.find('.editForm').hide();
    form.find('.contents').show();
});

您根本不需要使用.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();
    }
});

我喜欢使用最近的
和查找
而不是父项
和子项
（分别）。他们可以向上或向下搜索多个层，并在层次结构中搜索您要查找的内容，而不是向上或向下搜索单个层
如果在加载DOM后插入.edit
表单，则需要将单击事件绑定到文档
$(document).on('click', '.editButton', function() {
    var form = $(this).closest('.edit');
    form.find('.editForm').hide();
    form.find('.contents').show();
});

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>


$（'div.edit'）。每个（函数（i）{
$（this.children（'.editForm'）.hide（）；
})
$（'div.edit'）。每个（函数（）{
var$this=$（this）；
$（this）.children（'.editButton'）。单击（function（）{
$this.children（'.editForm'）.show（）；
$this.children（'.contents'）.hide（）；
});
})

如果可以的话，我会对代码进行更多的修改：
<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>


$（'.edit.editForm'）.hide（）；//这将隐藏.editForm的所有实例
$（'.edit.editButton'）。单击（函数（）{//为所有情况分配1个处理程序
$（this）.sibles（'.editForm'）.show（）；//显示同级编辑表单
$（this）.sibbing（'.contents'）.hide（）；//隐藏同级内容元素
});

参考：
同级选择器：
函数中的$（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>


$（'div.edit'）。每个（函数（i）{
$（this.children（'.editForm'）.hide（）；
})
$（'div.edit'）。每个（函数（）{
var$this=$（this）；
$（this）.children（'.editButton'）。单击（function（）{
$this.children（'.editForm'）.show（）；
$this.children（'.contents'）.hide（）；
});
})

如果可以的话，我会对代码进行更多的修改：
<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>


$（'.edit.editForm'）.hide（）；//这将隐藏.editForm的所有实例
$（'.edit.editButton'）。单击（函数（）{//为所有情况分配1个处理程序
$（this）.sibles（'.editForm'）.show（）；//显示同级编辑表单
$（this）.sibbing（'.contents'）.hide（）；//隐藏同级内容元素
});

参考：
同级选择器：
单击处理程序中的此与each中的不同。在单击中，它引用.editButton元素。.editButton
没有子元素<代码>$（此）
内部事件