单击隐藏div - 多个框

Question

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

因此我有三个＆＃34;添加另一个＆＃34;按钮和三个成功警报。当有人点击关闭时，该警报消息需要消失。

问题

我在这个成功框中使用了javascript。它做了这些事情。

  

点击＆＃34;添加另一个＆＃34;按钮，出现成功框。
单击关闭按钮   成功的盒子，盒子消失了。

这是我的代码。

＆＃13;

＆＃13;

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';
};

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

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

Answer 1

您可以使用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();
});

Answer 2

对于显示通知框而不重复代码，您可以使用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 
});

上述行的说明：这只是意味着我们正在获得＆＃34;点击＆＃34;的价值。按钮的data-target值（1或2）和追加该值到＆＃34; add-box-wrap＆＃34;（将为{{1 }}或add-box-wrap1）搜索该元素以使用add-box-wrap2显示它。

  

使用.show()或show() jquery函数取决于您。但我建议不要混合使用vanilla JS和JQuery代码（比如你的问题）。

<强>合

您只需使用.css或closest，就像这样：

parent

＆＃13;

＆＃13;

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

＆＃13;

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

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

＆＃13;

＆＃13;

＆＃13;

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

使用bootstrap，您可以将<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> div包裹在add-box-wrap中，并为每个div提供类似 col - * - 4 （.row）的类假设您有3个成功按钮（12/3 = 4）。所以你的html的第一部分将成为

class="col-xs-4 col-md-4 col-lg-4"