javascript - jQuery 隐藏和显示太不加区别，需要更精确

Question

我正在尝试制作独特的联系人卡片，该卡片从<input>中获取用户的姓名和描述。标签和.append()是 <div> 中的输入信息标签。

逻辑进展应该是这样的......

1. 用户输入名字和姓氏以及 self 描述。
2. 当用户点击“添加用户”按钮时，联系人卡片上应该只显示用户的名字和姓氏。
3. 当点击联系人卡片本身时，它应该隐藏名字和姓氏信息，并仅显示用户的描述。

我的 HTML...

<form>
    <h3>First name: <input id="f-name" class="border-rad" type="text"></input></h3>
    <h3>Last name: <input id="l-name" class="border-rad" type="text"></input></h3>
    <h3 id="description-h3">Description:</h3>
    <textarea id="text" class="border-rad" rows="10" cols="40"></textarea>
</form>
<button class="border-rad">Add User</button>
<div id="right-container"></div>

我的 jQuery...

$(document).ready(function(){
     $("button").click(function(){
         $("#right-container").append("<div id='name' class='contact-cards'>" + $('#f-name').val() + " " + $('#l-name').val() + "<br> Click For Description</div><br>");
         $("#right-container").append("<div class='contact-cards description'>" + $('#text').val() + "</div>")
         $(".description").hide();
     });

     $(document).on('click', '#name', function(){
          $(this).hide();
          $(".description").show();
     });
});

我几乎已经有了它，但是当我单击一张联系人卡片以显示该特定用户卡片的具体描述时，它会立即显示该用户的所有描述。它不应该这样做。它应该仅在单击该卡时显示特定用户的描述。

查看下面的屏幕截图，直观地了解联系人卡片当前的功能...

Before card is clicked

After card is clicked

Answer 1

您遇到的主要问题是 onclick 回调中的选择 $('.description') 返回多个元素，因为您为描述创建的每个 div 都将具有该类名称。所以你只需要一种方法来区分适用于当前联系人的 div。

您可以通过多种方式执行此操作，以下是其中一种。 只需将 onclick 回调中对 show() 的调用更改为以下内容:

$(this).nextAll().eq(1).show();

调用 nextAll() 将返回 br 标记作为第一个元素，因此您需要选择第二个元素，即 eq(1)。