单击时隐藏 div - 多个框答案

【问题标题】：Hide divs on click - multiple boxes单击时隐藏 div - 多个框
【发布时间】：2017-07-04 08:53:18
【问题描述】：

我的信息提交表格有点长。我有一个选项，有人点击“添加另一个”，有一个通知框显示文本，如“成功！”就像关闭按钮一样。请检查此图片。

因此，我有三个“添加另一个”按钮和三个成功警报。当有人单击关闭时，该警报消息需要消失。

问题

我为那个成功框使用了 javascript。它会做这些事情。

点击“添加另一个”按钮，出现成功框。
点击关闭按钮成功框，框消失。

这是我的代码。

document.querySelector(".add-box").addEventListener("click", function() {
  document.querySelector(".add-box-wrap").style.display = "inline-block";
});

document.querySelector(".add-box1").addEventListener("click", function() {
  document.querySelector(".add-box-wrap1").style.display = "inline-block";
});

document.querySelector(".add-box2").addEventListener("click", function() {
  document.querySelector(".add-box-wrap2").style.display = "inline-block";
});


$(".claim-btn-close").click(function() {
  $(".add-box-wrap").hide();
});

$(".claim-btn-close1").click(function() {
  $(".add-box-wrap1").hide();
});

$(".claim-btn-close2").click(function() {
  $(".add-box-wrap2").hide();
});

<!-- This goes end of html page -->
function hide(target) {
  document.getElementsByClassName(target).style.display = 'none';
};

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!--Success form-->
<div class="add-box-wrap">
  <div class="claim-btn-close" onclick="hide('.claim-btn-close')">
    <i class="fa fa-times" aria-hidden="true"></i>
  </div>
  <a href="" class="btn btn-primary claim-btn">Success!</a>
</div>

<!--Add another button -->
<div class="col-lg-10 col-md-10 col-sm-12 no-padding">
  <a class="add-box">Add another<i class="fa fa-plus"></i></a>
</div>

见.. 代码重复存在一个主要问题。（我没有重复html代码，只是在这里发布一个例子）我想知道实现这样的事情的最佳实践。

【问题讨论】：

我认为您可以将自定义属性添加到您的 html 元素 idx=1、idx=2 等，因此当单击按钮时，您会获得它的索引，并使用它来查找包含这些元素的 html要隐藏的索引。
愚蠢的问题，但是，add-box 和 add-box1 等的成功形式有什么区别 - 一个文本，一个值？

标签： javascript jquery html css

【解决方案1】：

为了在不重复代码的情况下显示通知框，其中一种方法是您可以使用data 属性。更改所有按钮的data 属性并让.add-box 类相同。像这样：

<div class="add-box-wrap1" style="display: none;">
  <div class="claim-btn-close">
    <i class="fa fa-times" aria-hidden="true"></i>
  </div>
  <a href="" class="btn btn-primary claim-btn">Success!</a>
</div>
<div class="add-box-wrap2" style="display: none;">
  <div class="claim-btn-close">
    <i class="fa fa-times" aria-hidden="true"></i>
  </div>
  <a href="" class="btn btn-primary claim-btn">Success!</a>
</div>

<!--Add another button -->
<div class="col-lg-10 col-md-10 col-sm-12 no-padding">
  <a class="add-box" data-target="1">Add another<i class="fa fa-plus"></i></a>
</div>

<!--Add another button -->
<div class="col-lg-10 col-md-10 col-sm-12 no-padding">
  <a class="add-box" data-target="2">Add another<i class="fa fa-plus"></i></a>
</div>

并将您的 Jquery 更改为仅一个函数。

$(".add-box").click(function() {
  $(".add-box-wrap" + $(this).data('target')).show(); //.add-box-wrap1 or .add-box-wrap2 
});

上述行的解释：这只是意味着我们正在获取“点击”按钮的data-target值（1或2）和附加将该值添加到“add-box-wrap”（将是add-box-wrap1 或add-box-wrap2）以搜索该元素以使用.show() 显示它。

使用show() 或.css jquery 函数由您决定。但我建议不要同时混合 vanilla JS 和 JQuery 代码（就像你的问题一样）。

结束

您可以简单地使用closest 或parent，如下所示：

$(".claim-btn-close").click(function(){
    $(this).parent().hide();
});

$(".add-box").click(function() {
  $(".add-box-wrap" + $(this).data('target')).show();
});

$(".claim-btn-close").click(function(){
    $(this).parent().hide();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="add-box-wrap1" style="display: none;">
  <div class="claim-btn-close">
    <i class="fa fa-times" aria-hidden="true"></i>
  </div>
  <a href="" class="btn btn-primary claim-btn">Success!</a>
</div>
<div class="add-box-wrap2" style="display: none;">
  <div class="claim-btn-close">
    <i class="fa fa-times" aria-hidden="true"></i>
  </div>
  <a href="" class="btn btn-primary claim-btn">Success!</a>
</div>

<!--Add another button -->
<div class="col-lg-10 col-md-10 col-sm-12 no-padding">
  <a class="add-box" data-target="1">Add another<i class="fa fa-plus"></i></a> 
</div>

<!--Add another button -->
<div class="col-lg-10 col-md-10 col-sm-12 no-padding">
  <a class="add-box" data-target="2">Add another<i class="fa fa-plus"></i></a>
</div>

更新另一个问题（3 栏）：

使用引导程序，您可以将 add-box-wrap div 包装在 .row 中，并为每个 div 赋予类似 col-*-4(class="col-xs-4 col-md-4 col-lg-4") 的类，假设您有 3 个成功按钮(12/3 = 4)。所以你的 html 的第一部分会变成

<div class="row">
  <div class="add-box-wrap1 col-md-4 col-lg-4" style="display: none;">
    <div class="claim-btn-close">
      <i class="fa fa-times" aria-hidden="true"></i>
    </div>
    <a href="" class="btn btn-primary claim-btn">Success!</a>
  </div>
  <div class="add-box-wrap2 col-md-4 col-lg-4" style="display: none;">
    <div class="claim-btn-close">
      <i class="fa fa-times" aria-hidden="true"></i>
    </div>
    <a href="" class="btn btn-primary claim-btn">Success!</a>
  </div>
  <div class="add-box-wrap3 col-md-4 col-lg-4" style="display: none;">
    <div class="claim-btn-close">
      <i class="fa fa-times" aria-hidden="true"></i>
    </div>
    <a href="" class="btn btn-primary claim-btn">Success!</a>
  </div>
</div>

【讨论】：

那么如何通过“添加另一个”来减少重复？
您不必编写其他函数。那一个函数（$(".add-box").click(function）可以处理所有事情。让我在答案中添加更多“添加更多按钮”
现在我添加了 2 个“添加按钮”和“警报框”，但您只需要一个 $(".add-box").click(function 而不是 2 个点击功能（如您的问题）
谢谢！让我试试这个。
如果您遇到任何问题，请务必告诉我。用这个替换你所有的hide & addEventListener & click 函数。还将display: none; 添加到您的add-box-wraps

【解决方案2】：

您可以使用 DOM 关系来定位所需的元素。使用通用类绑定事件处理程序，然后使用.closest() 向上遍历所需元素。

$(".claim-btn-close").click(function(){
    $(this).closest(".add-box-wrap").hide();
});

如果元素是动态生成的，请使用Event Delegation 方法。

$(staticParentElemet).on('click',".claim-btn-close",function(){
    $(this).closest(".add-box-wrap").hide();
});

【讨论】：

这3个箱子怎么申请？
@CssSY 将claim-btn-close 添加到所有按钮，它将附加事件处理程序
那么如何通过“添加另一个”来减少重复？