Question

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

我希望当我点击“编辑”时，这应该隐藏“数据”类并显示“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

Answer 1

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

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

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

DEMO

Answer 2

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

Answer 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小提琴

点击元素应该隐藏父元素

3 个答案:

DEMO