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

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

小提琴： 小提琴

Answer 2

用于Bootstrap警报的类没有问题，单击事件也没有问题，但是UNEXPECTED END OF INPUT表示存在未关闭的类或函数。 在您的情况下，您声明了两个函数，但是只有一个关闭了...：

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

Uncaught ReferenceError：未定义$表示未安装JQuery库...是否具有必需的脚本标记？ 就像是 ：

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