Отображение окна с предупреждением начальной загрузки при нажатии на привязку

ProgramBox

Отображение окна с предупреждением начальной загрузки при нажатии на привязку

Post author:admin
Запись опубликована:28 мая, 2023
Post category:Вопросы по программированию

#javascript #jquery #twitter-bootstrap

Вопрос:

У меня есть элемент привязки, который удаляет элементы при нажатии на него. Я пытаюсь отобразить окно сообщения с предупреждением об опасности начальной загрузки (не окно предупреждения) при нажатии на тег привязки. я пытаюсь добиться этого, не оборачивая привязку в 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>

Ответ №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;
}

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

И скрипка: скрипка

1. этот пример — это то, чего я хочу достичь, jsfiddle.net/g1rnnr8r/2 . но это делается с помощью тегов button и div. где as mine — это просто тег привязки, который используется для удаления элементов в списке. а затем показывать это предупреждающее сообщение, когда оно удалено. как я могу адаптировать свой пример к этому решению.

2. Пожалуйста, взгляните на эту скрипку. jsfiddle.net/agorgon/43g5pvk0/7 Я изменил теги кнопок на теги привязки и добавил дополнительные event.preventDefault() для остановки привязки, чтобы изменить местоположение.

3. Дело в том, что это не окно сообщения начальной загрузки. поскольку я использую bootstrap, этот пример jsfiddle.net/g1rnnr8r/2 это то, чего я хочу достичь с помощью моего тега привязки ` <a href=»#» class=»btn btn-danger remove-item» data-dismiss=»alert» data-code=»<?php echo $product_code; ?>»><i class=»glyphicon glyphicon-trash»></i></a> ` возможно ли адаптировать мой тег привязки, чтобы получать это окно сообщения при нажатии?

Ответ №2:

Нет проблем с классами, которые вы используете для предупреждения о начальной загрузке, и также нет проблем с событием click, но НЕОЖИДАННОЕ ЗАВЕРШЕНИЕ ВВОДА означает, что существует класс или функция, которые не закрыты. В вашем случае вы объявили две функции, но закрыта только одна… :

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

Неперехваченная ошибка ссылки: $ не определен означает, что библиотека jQuery не установлена… У вас есть необходимый тег script? Что-то вроде :

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

1. спасибо за ваш ответ, одна функция предназначена для щелчка, а другая — для удаления окна предупреждения через 2 секунды. не уверен, что нужно сделать, чтобы это заработало. можете ли вы помочь, пожалуйста

2. Вам нужно завершить любую функцию символом }, но у вас есть только два из них, чтобы закрыть document.ready и обе ваши внутренние функции…

3. я добавил еще одну закрытую скобку. это то, что я пропустил . но ваш ответ точно такой же, как у меня, скобка отсутствует, я не уверен, что вы пытаетесь подразумевать, имея тот же ответ?

4. Я меняю отступ только для того, чтобы вы могли сосредоточиться на отсутствующей скобке

5. я вижу, добавив последнюю закрытую скобку . не отображается окно предупреждения. я думаю, что проблема не в этом. не уверен, что еще мне нужно добавить