单击时元素应从父元素中隐藏答案

【问题标题】：On click element should hide from parent element单击时元素应从父元素中隐藏
【发布时间】：2016-04-14 08:43:48
【问题描述】：

在给定的任务中，我使用了四次“数据行”，其中有一个链接有“编辑”。

我希望当我点击“编辑”时，它应该隐藏在“数据”类中并仅从当前的“数据行”中显示“get-input”。在我的查询中，当我点击“编辑”时，它会从所有“数据行”中隐藏。

这样做的逻辑是什么？

HTML：

<div class="data-row">
    <span class="data-label">Email:</span>
    <span class="data"><a href="mailto:info@apus.edu">info@sjsu.edu</a>  </span>
    <div class="hidden get-input phone">
        <input type="phone" placeholder="Enter phone number" value="877-755-2787">
    </div>
    <a href="#" class="edit-contact orange f-right"> Edit</a>
</div>

CSS：

.hidden {
    display: none;
}

.data-row {margin-bottom:20px}

jQuery：

$(".edit-contact").click(function () {
  $(this).addClass("hidden");
  $(".data").addClass("hidden");
  $(".get-input").removeClass("hidden");
});

Check Here JSFiddle

【问题讨论】：

查看demo

标签： javascript jquery html

【解决方案1】：

您的选择器选择所有具有类数据的元素。您需要指定您想要将您的课程添加到哪一个。您可以通过以下方式实现：$(this).parent().children(".data").addClass("hidden");

【讨论】：

【解决方案2】：

你必须使用this引用来隐藏与被点击元素相关的元素，

$(".edit-contact").click(function(){
  $(this).prev(".get-input").removeClass("hidden")
     .prev(".data").add(this).addClass("hidden");
});

.prev() 将选择与被点击元素相关的前一个兄弟元素。

DEMO

【讨论】：

就是这样，感谢 Rajaprabhu 的快速响应 :)
@JavaScriptbeginner... 很高兴为您提供帮助！ :)

【解决方案3】：

您可以使用 event.target 来查找当前单击的编辑图标。以下是对此的js更改。

$(".edit-contact").click(function(event){
  $(this).addClass("hidden");
  $(event.target.parentNode).find(".data").addClass("hidden");
  $(event.target.parentNode).find(".get-input").removeClass("hidden");
});

更改并签入 JS fiddle

【讨论】：