javascript - 单击时隐藏 div - 多个框

Question

我的信息提交表单有点长。我有一个选项，有人单击“添加另一个”，会显示一个通知框，其中显示“成功!”之类的文本。就像关闭按钮一样。请检查这张图片。

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

问题

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

Click "Add another" button, appears success box.
Click close button on success box, box disappears.

这是我的代码。

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 代码，只是在这里发布一个例子)我想知道实现这样的事情的最佳实践。

Answer 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 
});

上面一行的解释:这只是意味着我们正在获取“clicked”按钮的 data-target 值(1 或 2)和 < strong>将该值附加到“add-box-wrap”(将是 add-box-wrap1 或 add-box-wrap2)以进行搜索使用 .show() 显示该元素。

Using show() or .css jquery functions is upto you. But I suggest not to mix both vanilla JS and JQuery codes(like in your question).

结束

您可以简单地使用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 列):

使用 Bootstrap ，您可以将 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>