Question

我有三个点击事件。根据点击的内容，每个人都隐藏并显示不同的内容。除了点<form> markas以及<p>点击cancel时，所有内容都有效。

这是jQuery：

$(".cancel").on("click", function(){
    $(this).hide().parent().find('.celltext, .editlink, .marklink').show().parent().find('.editas, .markas').hide();
});
$(".editlink").on("click", function(){
    $(this).hide().parent().find('.celltext, .marklink, .markas').hide().parent().find('.editas, .cancel').show();
    $(this).parent().find(".editas input:text").focus();
});
$('.marklink').on("click", function(){
    $(this).hide().parent().find('.celltext, .editlink, .editas').hide().parent().find('.markas, .cancel').show();
    $(this).parent().find(".editas input:text").focus();
});

HTML正是您所假设的。我使用了类似的代码，其中包含.prev()和.next()字符串，所有内容都被隐藏并正确显示。因为我知道它不是内部HTML结构，而不是粘贴不必要的代码（我使用php函数和代码从数据库中收集信息），一般结构是这样的：

<div>
    <p class="celltext">Info from database</p>
    <p class-"editlink">Edit</p>
    <p class="marklink">Mark</p>
    <form class="markas">Form with select box to mark the cell</form>
    <form class="editas">Form with text fields to edit the info</form>
    <p class="cancel">Cancel</p>
</div>

我试图将表单单独隐藏在一个单独的行中，但这也不起作用。为什么它不隐藏？如何在点击取消时正确隐藏它？

更新它与表单显示的顺序有关。我交换了markas和editas，现在markas隐藏和editas没有。

Answer 1

根据上述评论，这是解决问题的答案：

如果没有看到问题的实例，我就不能说了当然，但我怀疑你收集的元素超出了你的预期使用链式find（）和parent（）调用。我建议做一个 parentEl = $（this）.parent（）; $（本）.hide（）;在所有的开始你的函数，然后做parentEl.find（...）。show（）;和 parentEl.find（...）隐藏（）。它也使您的代码更易于阅读。

$(".cancel").on("click", function(){ var parentel = $(this).parent(); $(this).hide(); parentel.find('.celltext, .editlink, .marklink').show(); parentel.find('.editas, .markas').hide(); });

jQuery不会在点击时隐藏表单

1 个答案: