单击时元素应隐藏在父元素之外

On click element should hide from parent element

本文关键字：元素 隐藏 单击      更新时间：2024-06-14

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

我希望当我点击"编辑"时，这应该与"数据"类一起隐藏，并只显示当前"数据行"中的"获取输入"。在我的查询中，当我点击"编辑"时，它会隐藏在所有的"数据行"中。

这其中的逻辑是什么？

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");
});

检查此处JSFiddle

选择器选择具有类数据的所有元素。您需要指定要将类添加到哪个。您可以使用： $(this).parent().children(".data").addClass("hidden");

来实现这一点

您必须使用this引用来隐藏与单击的元素相关的元素

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

.prev()将选择与单击的元素相关的前一个同级。

演示

您可以使用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

相关文章：