jquery - модальная нумерация страниц. предыдущий / следующий - PullRequest
Новая
       8

jquery - модальная нумерация страниц. предыдущий / следующий

0 голосов
/ 08 ноября 2018

У меня есть некоторые динамические модалы, которые появляются после нажатия на div.Я хочу присоединиться к этим модалам с помощью двух стрелок назад / вперед и позволить людям, нажимающим на стрелки, переходить между модалами без необходимости закрывать текущий модал и открывать следующий.

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

Таким образом, стрелки не работают

Вот код: [

    var countModal =0;
    // Get the button that opens the modal
    $('.plan-wrapper').on('click', function() {
        var id = $(this).data('id');
        console.log($(this).data('count'));
        $('#myModal_'+id).css('display', 'flex');
        countModal =  $(this).data('count');
        
    })        

    // Get the button that opens the modal     
    $('.chiudi_dimensione').on('click', function() {
        var id = $(this).data('id');
        $('#myModal_'+id).hide();
    })        

    $listModal = $('.mymodal');        
    console.log($listModal);
    
    $('.freccia-indietro').on('click', function(value){  
        console.log($listModal[countModal]);
        $listModal[countModal].style.display = 'none';
        countModal = countModal -1;
        if(countModal<0){
            coutModal=$listModal.count;
        }                    
        $listModal[countModal].style.display = 'flex';
    })
    
    $('.freccia-indietro').on('click', function(value){
        countModal = countModal +1;
        if(countModal>$listModal.count){
            coutModal=0;
        }
    })
    
<script src="https://code.jquery.com/jquery-3.3.1.min.js" type="text/javascript"></script>
    
 <div class="plan-wrapper" data-id='<?php echo $id; ?>'>
 
 <div style="opacity:1" id="myModal_<?php echo $id; ?>" class="lightbox_wrapper_dimensione">
      <div data-id='<?php echo $id; ?>' class="chiudi_dimensione">X</div>
      <div class="freccia-indietro"></div>
      <div class="freccia-avanti"></div>
</div>

1 Ответ

0 голосов
/ 08 ноября 2018

1 нет класса myModal, кажется, присутствует в вашем html, может быть, вы должны дать атрибут class=myModal для всех ваших модалов, чтобы получить их через $listModal = $('.mymodal');

2 у вас есть опечатка coutModal вместо countModal

3, чтобы получить длину коллекции jquery, используйте length, а не count заменить $listModal.count; на $listModal.length;

e facci sapere;)

...