Javascript переменная модального прохода c переменная во всплывающем окне в зависимости от динамичности c id? - PullRequest
Новая
       64

Javascript переменная модального прохода c переменная во всплывающем окне в зависимости от динамичности c id?

0 голосов
/ 05 апреля 2020 
    <a id="wishlisticon" data-toggle="modal" data-target="#wishlist-modal" data-productid="1"></a>
    <a id="wishlisticon" data-toggle="modal" data-target="#wishlist-modal" data-productid="2"></a>
    <a id="wishlisticon" data-toggle="modal" data-target="#wishlist-modal" data-productid="3"></a>
    <a id="wishlisticon" data-toggle="modal" data-target="#wishlist-modal" data-productid="4"></a>

<script>
    $('#wishlist-modal').on('shown.bs.modal', function() {
       var $el = $("#wishlisticon");
       var $username = $el.data('productid');
       alert($username);
    });
</script>

На странице есть несколько кнопок, указывающих на один и тот же модал, однако для каждого модала необходимо передавать разные данные. Данные для передачи сохраняются в data-productid. Когда открывается модальное всплывающее окно, я хочу использовать переменную data-productid.

Функция работает, но каждый раз, когда предупреждение дает одно и то же значение продукта (то есть = 1) Функция не может понять, что она должна получить соответствующий data-productid

1 Ответ

0 голосов
/ 05 апреля 2020

Как упомянуто в документации , вы можете использовать event.relatedTarget, чтобы изменять содержимое модального экрана в зависимости от того, какая кнопка была нажата. 

$('#wishlist-modal').on('shown.bs.modal', function(event) {
   var $el = $(event.relatedTarget);
   var $username = $el.data('productid');
   alert($username);
});

DEMO: 

$('#exampleModal').on('shown.bs.modal', function (event) {
  var button = $(event.relatedTarget) // Button that triggered the modal
  var recipient = button.data('whatever')
  alert(recipient)
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" >
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="1">Open modal for 1</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="2">Open modal for 2t</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="3">Open modal for 3</button>

<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="exampleModalLabel">New message</h4>
      </div>
      <div class="modal-body">
        <h2>Hello World!</h2>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Send message</button>
      </div>
    </div>
  </div>
</div>
...