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

$(this)函数中的click包含$(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。以下是解决此问题的一种方法：

＆＃13;

$('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();
  });
});

＆＃13;

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

＆＃13;

Answer 3

您根本不需要使用.each()。只需在.click()类上执行.editButton事件，然后使用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（分别）。他们可以向上或向下移动1层，并在层次结构中搜索您要查找的内容，而不是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 个答案: