隐藏/显示子元素onClick

Question

我正在建立一个“编辑个人资料”页面。

这是我想做的：

在每个部分中，将显示雇主，并且将隐藏编辑表格。
当我单击“编辑雇主”按钮时，将显示编辑表格，而雇主将被隐藏。

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

Answer 1

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

Answer 2

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

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

Answer 3

您根本不需要使用.each() 。 只需在.editButton类上执行.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();
    }
});

我喜欢使用closest并且分别find比parent和children更多的东西。 他们可以上下一层一层地搜索层次结构，以查找所需的内容，而不是parent和children上下一层。

如果要在DOM加载后插入.edit表单，则需要将click事件绑定到文档

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

隐藏/显示子元素onClick

问题描述

3 个解决方案

解决方案1
2 已采纳 2016-12-28 14:30:08

解决方案2
0 2016-12-28 14:14:04

解决方案3
0 2016-12-28 14:17:48

隐藏/显示子元素onClick

问题描述

3 个解决方案

解决方案1 2 已采纳 2016-12-28 14:30:08

解决方案2 0 2016-12-28 14:14:04

解决方案3 0 2016-12-28 14:17:48

解决方案1
2 已采纳 2016-12-28 14:30:08

解决方案2
0 2016-12-28 14:14:04

解决方案3
0 2016-12-28 14:17:48