仅在选定的 div 上切换隐藏类答案

【问题标题】：Toggle hide class only on selected div仅在选定的 div 上切换隐藏类
【发布时间】：2020-07-25 12:44:58
【问题描述】：

我有一个带有 API 生成的 LI（用户）的 UL。在每个用户内部，都有一个隐藏的容器，其中包含用于添加要搜索的标签的输入。当您单击“+”伪按钮时，这些隐藏的容器应该只显示在选定的用户身上。

我让它切换隐藏类，但它会切换每个生成的类，而不是我点击的特定用户。

jQuery 代码：

$(".fa-plus").on("click", (() =>{
    $("#tag-container, #add-tag-input, #hideGrades",() => {
        $(this).toggleClass("hidden");
    });
}));

HTML 代码：

<div id="hideGrades">
  <p class="card-text hidden">Grades: <%= grades %></p> 
</div>  
<div class="tag-container hidden" id="tag-container">
</div>
<div>
<input class ="hidden" type="text" value="" placeholder="Add a tag" id="add-tag-input" />
</div>

全格：

                    <div class="col-md-8">
                        <div class="card-body">
                            <h2 class="card-title"><%=student["firstName"] + " " + student["lastName"] %> <i class="fas fa-plus"></i></h2>
                            <div>
                                <p class="card-text">Email: <%= student["email"] %></p>
                                <p class="card-text">Company: <%= student["company"] %></p>
                                <p class="card-text">Skill: <%= student["skill"] %></p>
                                </p>
                                <div id="hideGrades">
                                    <p class="card-text hidden">Grades: <%= student["grades"] %></p>    
                                </div>
                                <div class="tag-container hidden" id="tag-container">
                                </div>
                                <div>
                                  <input class ="hidden" type="text" value="" placeholder="Add a tag" id="add-tag-input" />
                                </div>
                             </div>
                        </div>
                    </div>

谢谢！

【问题讨论】：

您不能在箭头函数中使用this。阅读更多here
你的+号出现在哪里？在那里你可以在你的 HTML 中添加它。
@AlwaysHelping 感谢您的提示，我添加了您请求的 HTML 代码。
添加了完整的 Div 以供参考。

标签： javascript html jquery

【解决方案1】：

您可以修改您的 HTML 以使其更容易，并且只需使用像 parent() 和 siblings() 这样的 jQuery 函数来显示您点击的项目，而不是 DOM 中的所有类。

你也不需要在jQuery中使用箭头函数和this =>这会使事情变得复杂。

您可以简单地使用function 来做同样的事情。

在下面运行 sn-p 以查看工作情况（单击 + 符号，以便为每个学生显示隐藏字段）

$(".fa-plus").on("click", function(){
    $(this).parent().siblings('.grades_section').toggleClass("hidden");
});

.hidden {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<div class="col-md-8">
  <div class="card-body">
    <h2 class="card-title">Student 1 <i class="fa fa-plus"></i></h2>
    <div>
      <p class="card-text">Email: Email
      </p>
      <p class="card-text">Company: Company
      </p>
      <p class="card-text">Skill: Skill
      </p>
      </p>
    </div>
    <div class="grades_section hidden">
      <div id="hideGrades">
        <p class="card-text ">Grades: grades</p>
      </div>
      <div class="tag-container" id="tag-container">
        Some Data
      </div>
      <div>
        <input class="add-tag-input" type="text" value="" placeholder="Add a tag" />
      </div>
    </div>
  </div>
</div>

<div class="col-md-8">
  <div class="card-body">
    <h2 class="card-title">Student 2 <i class="fa fa-plus"></i></h2>
    <div>
      <p class="card-text">Email: Email
      </p>
      <p class="card-text">Company: Company
      </p>
      <p class="card-text">Skill: Skill
      </p>
      </p>
    </div>
    <div class="grades_section hidden">
      <div id="hideGrades">
        <p class="card-text ">Grades: grades</p>
      </div>
      <div class="tag-container" id="tag-container">
        Some Data
      </div>
      <div>
        <input class="add-tag-input" type="text" value="" placeholder="Add a tag" />
      </div>
    </div>
  </div>
</div>

【讨论】：