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

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

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

2 个答案: