jQuery-模式分页。上一页/下一页

时间:2018-11-08 11:16:09

标签: javascript php jquery html5 modal-dialog

点击div后,我会看到一些动态模态。 我想通过两个上一个/下一个箭头加入这些模态,并让单击箭头的人在模态之间切换,而不必关闭当前模态并打开下一个模态。

click here看我在做什么。如果您单击箭头,则需要转到下一个上一个弹出模式。

所以箭头不起作用

代码如下:[

    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 :(得分:0)

1您的html中似乎没有类myModal,也许您应该为所有模态赋予kernel.shm_next_id = -1 kernel.shm_rmid_forced = 0 kernel.shmall = 18446744073692774399 kernel.shmmax = 18446744073692774399 kernel.shmmni = 4096 sysctl: reading key "net.ipv6.conf.all.stable_secret" sysctl: reading key "net.ipv6.conf.default.stable_secret" sysctl: reading key "net.ipv6.conf.enp0s3.stable_secret" sysctl: reading key "net.ipv6.conf.enp0s8.stable_secret" sysctl: reading key "net.ipv6.conf.lo.stable_secret" vm.hugetlb_shm_group = 0 属性以通过class=myModal

检索它们。

2您有一个错字$listModal = $('.mymodal');而不是coutModal

3要获取jquery集合的长度,请使用countModal而不是length  将count替换为$listModal.count;

facci sapere;)