单击锚点时显示引导警告消息框

Question

我有一个锚元素，当它被点击时，它会删除项目。单击锚点标记时，我正在尝试显示引导危险警报消息框(而不是警报窗口)。我试图在不包装div中的锚点的情况下实现这一点。任何帮助都是非常感谢的。

​

$(document).ready(function(){
$('.remove-item').click(function(){
    $('.alert').show()
setTimeout(function(){
    $(".remove-item").hide(); 
  }, 2000);
});
});

.alert{
    display: none;
}

 <a href="#" class="btn btn-danger  remove-item" data-dismiss="alert" data-code="<?php echo $product_code; ?>"><i class="glyphicon glyphicon-trash"></i></a>

​

Answer 1

这里有一个你可以依赖的小解决方案。它在vanillia JS中。

HTML

<button class="anchor">test 1</button>
<button class="anchor">test 2</button>
<button class="anchor">test 3</button>
<button class="anchor">test 4</button>

<div id="alert">
<strong>Are you sure?</strong>
<button id="alert-ok">ok</button>
</div>

CSS

#alert {
  display: none;
}

JS

var buttons = document.getElementsByClassName('anchor');

var alertBox = document.getElementById("alert");

var alertBoxOk = document.getElementById("alert-ok");


Array.prototype.forEach.call(buttons, function (btn) {
    btn.addEventListener("click", function (event) {
  var toRemove = event.target;
  alertBox.style.display = "block";
  console.log(toRemove);
  alertBoxOk.addEventListener("click", function() {
    toRemove.remove();
    alertBox.style.display = "none";
  });
  })
});

function deleteAnchor() {
    this.remove();
}

还有小提琴：fiddle

Answer 2

用于Bootstrap警报的类没有问题，单击事件也没有问题，但意外的输入结束意味着有一个类或函数没有关闭。在您的例子中，您声明了两个函数，但只有一个是关闭的……：

$(document).ready(function(){
  $('.remove-item').click(function(){
  $('.alert').show()
  setTimeout(function(){
     $(".remove-item").hide(); 
  }, 2000);
});

未定义ReferenceError：$表示未安装JQuery库...您是否有所需的脚本标记？类似于：

<script
src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha256-3edrmyuQ0w65f8gfBsqowzjJe2iM6n0nKciPUp8y+7E="
crossorigin="anonymous"></script>