單擊錨點時顯示引導警報消息框

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>