Question

我的页面在我的文件夹中显示图像，并允许通过PHP删除图像。我想显示删除任何图像的警报。

当您在警报中单击“否”时，它会淡出，然后立即再次淡入。为什么会这样？

在示例中，单击任何图像，然后在警报框中单击“否”，以查看我的问题。

<form method="post" action="{{ url('oil_filling/add_filling_detail') }}" enctype="multipart/form-data">

<div class="form-group">
                        <label class="control-label">image Upload</label>
                        <input type="file" name="image_path" class="form-control" required>
                    </div>

$(document).ready(function() {
  $('.dele').each(function(i) {
    var $this = $(this);
    var newClass = "a" + i++;
    $this.addClass(newClass);
  });

  $('.alert').each(function(i) {
    var $jis = $(this);
    var jewClass = "b" + i++;
    $jis.addClass(jewClass);
    var hala = $jis.addClass(jewClass);
  });

  $(".dele").click(function() {
    $(this).children(".alert").fadeIn();
  });

  $("li.no, .alertclose").click(function() {
    $(".alert").fadeOut();
  });
});

body {
  margin: 20px;
  background-color: #999;
}

div.alert {
  position: fixed;
  top: 50%;
  left: 50%;
  width: 300px;
  margin: -100px 0 0 -150px;
  z-index: 2;
  height: auto;
  box-shadow: 0px 0px 10px 0px #ccc;
  background-color: #fff;
  overflow: hidden;
  border-radius: 10px;
  padding: 1%;
  display: none;
  cursor: default;
}

div.note {
  width: 98%;
  padding: 1%;
  float: right;
  text-align: left;
  font-size: 14pt;
  line-height: 100%;
  direction: ltr;
  margin-bottom: 20px;
}

ul.yesorno {
  padding: 0;
  margin: 0;
  list-style: none;
  text-align: center
}

ul.yesorno li {
  display: inline-block;
}

ul.yesorno li.no,
ul.yesorno li.inno {
  background-color: gainsboro;
  width: 50px;
  color: #999;
  padding: 5px;
  line-height: 150%;
  font-size: 12pt;
  border-radius: 10px;
  border-bottom: 1px solid #333;
  cursor: pointer;
  margin-left: 5px
}

ul.yesorno li.yes a {
  background-color: #07BE03;
  width: 50px;
  color: #fff;
  display: inline-block;
  padding: 5px;
  line-height: 150%;
  font-size: 12pt;
  border-radius: 10px;
  border-bottom: 1px solid #333;
  cursor: pointer;
  text-decoration: none;
}

img {
  width: 80px;
  height: 90px;
  margin: 5px;
  padding: 0;
  border: 2px solid #000;
}

div.dele {
  float: left;
  cursor: pointer
}

Answer 1

您能用下面的代码替换您的代码吗？。经过测试并为我工作

$('body').on('click','li.no, .alertclose',function() {
    $(".alert").fadeOut();
});

Answer 2

问题是因为.no元素是.dele元素的子元素。这样，当您单击.no时，该元素逐渐淡出，但是单击使DOM冒泡到.dele，然后再次使其淡入。

要解决此问题，请在stopPropagation()点击处理程序中的事件上调用.no：

$("li.no, .alertclose").click(function(e) {
  e.stopPropagation();
  $(".alert").fadeOut();
});

$(document).ready(function() {
  $('.dele').each(function(i) {
    var $this = $(this);
    var newClass = "a" + i++;
    $this.addClass(newClass);
  });

  $('.alert').each(function(i) {
    var $jis = $(this);
    var jewClass = "b" + i++;
    $jis.addClass(jewClass);
    var hala = $jis.addClass(jewClass);
  });

  $(".dele").click(function() {
    $(this).children(".alert").fadeIn();
  });

  $("li.no, .alertclose").click(function(e) {
    e.stopPropagation();
    $(".alert").fadeOut();
  });
});

body {
  margin: 20px;
  background-color: #999;
}

div.alert {
  position: fixed;
  top: 50%;
  left: 50%;
  width: 300px;
  margin: -100px 0 0 -150px;
  z-index: 2;
  height: auto;
  box-shadow: 0px 0px 10px 0px #ccc;
  background-color: #fff;
  overflow: hidden;
  border-radius: 10px;
  padding: 1%;
  display: none;
  cursor: default;
}

div.note {
  width: 98%;
  padding: 1%;
  float: right;
  text-align: left;
  font-size: 14pt;
  line-height: 100%;
  direction: ltr;
  margin-bottom: 20px;
}

ul.yesorno {
  padding: 0;
  margin: 0;
  list-style: none;
  text-align: center
}

ul.yesorno li {
  display: inline-block;
}

ul.yesorno li.no,
ul.yesorno li.inno {
  background-color: gainsboro;
  width: 50px;
  color: #999;
  padding: 5px;
  line-height: 150%;
  font-size: 12pt;
  border-radius: 10px;
  border-bottom: 1px solid #333;
  cursor: pointer;
  margin-left: 5px
}

ul.yesorno li.yes a {
  background-color: #07BE03;
  width: 50px;
  color: #fff;
  display: inline-block;
  padding: 5px;
  line-height: 150%;
  font-size: 12pt;
  border-radius: 10px;
  border-bottom: 1px solid #333;
  cursor: pointer;
  text-decoration: none;
}

img {
  width: 80px;
  height: 90px;
  margin: 5px;
  padding: 0;
  border: 2px solid #000;
}

div.dele {
  float: left;
  cursor: pointer
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="dele">
  <img src="https://cdn3.volusion.com/yuqpe.xcnnr/v/vspfiles/photos/25-cent-E-liquid-Sample-2.jpg?1475251487">
  <div class="alert">
    <div class="note">Are you sure?</div>
    <ul class="yesorno">
      <li class="yes"><a href="unlink.php?name='img1'">Yes</a></li>
      <li class="no">No</li>
    </ul>
  </div>
</div>
<div class="dele">
  <img src="https://cdn3.volusion.com/yuqpe.xcnnr/v/vspfiles/photos/25-cent-E-liquid-Sample-2.jpg?1475251487">
  <div class="alert">
    <div class="note">Are you sure?</div>
    <ul class="yesorno">
      <li class="yes"><a href="unlink.php?name='img2'">Yes</a></li>
      <li class="no">No</li>
    </ul>
  </div>
</div>
<div class="dele">
  <img src="https://cdn3.volusion.com/yuqpe.xcnnr/v/vspfiles/photos/25-cent-E-liquid-Sample-2.jpg?1475251487">
  <div class="alert">
    <div class="note">Are you sure?</div>
    <ul class="yesorno">
      <li class="yes"><a href="unlink.php?name='img3'">Yes</a></li>
      <li class="no">No</li>
    </ul>
  </div>
</div>
<div class="dele">
  <img src="https://cdn3.volusion.com/yuqpe.xcnnr/v/vspfiles/photos/25-cent-E-liquid-Sample-2.jpg?1475251487">
  <div class="alert">
    <div class="note">Are you sure?</div>
    <ul class="yesorno">
      <li class="yes"><a href="unlink.php?name='img4'">Yes</a></li>
      <li class="no">No</li>
    </ul>
  </div>
</div>

对话框淡出什么，然后又重新出现？

2 个答案: