时间戳

首页 > 解决方案 > 仅在选定的 div 上切换隐藏类

javascript - 仅在选定的 div 上切换隐藏类

问题描述

我有一个带有 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>

谢谢！

标签： javascripthtmljquery

解决方案

你可以修改你的 HTML 让它变得更容易，并且简单地使用 jQuery 函数，比如parent()和siblings()来显示你点击的项目，而不是你的 DOM 中的所有类。

此外，您不需要使用箭头函数，this其中的 =>jQuery会使事情变得复杂。

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

运行下面的代码片段以查看工作情况（单击+号，以便为每个学生显示隐藏字段）

$(".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>

推荐阅读