jquery - 模态分页。 上一页/下一页

Question

I have some dynamic modals that appear after a click on a div. I want to join those modals through two prev/next arrows and let people, who click on the arrows go between the modals without having to close the current modal and open the next one.

click here to see what I'm working on. if you click on the arrow I need to go to the next prev popup modal.

So the arrows don't work

Here's the code: [

    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> 

</div>

Answer 1

1 no class myModal seems to be present in your html maybe you should give class=myModal attribute to all your modals to retrive'em via $listModal = $('.mymodal');

2 you have a typo coutModal instead of countModal

3 to get the length of jquery collection use length not count replace $listModal.count; with $listModal.length;

e facci sapere ;)