evento all’interno della funzione click

sto usando l’hash per rilevare la diapositiva corrente in una presentazione, ma vorrei farlo solo quando la presentazione è avanzata utilizzando i pulsanti precedenti o successivi. ma l’evento “ciclo dopo” che rileva una transizione nella presentazione, è cottura anche quando i pulsanti precedenti o successivi non vengono cliccato.

come faccio a far funzionare quell’evento solo durante la funzione click?

jsfiddle qui: https://jsfiddle.net/yd8L3enj/4/

$(document).ready(function() { var clicked = false; $('.controls').on('click', function() { $('.cycle-slideshow').on('cycle-after', function(event, optionHash) { var hash = window.location.hash; $('.clicked').removeClass('clicked') if (window.location.hash === hash) { $(hash).addClass('clicked') } else { $(hash).removeClass('clicked') } }); }); $('nav a').on('click', function() { clicked = !clicked; $('.clicked').removeClass('clicked'); $(this).addClass('clicked'); $('.content').addClass('visible'); }); $("nav a").mouseenter(function() { var href = $(this).attr('href'); window.location.hash = href $('.content').addClass('visible'); }).mouseleave(function() { var current = $('.clicked').attr('href'); window.location.hash = current if ($(".clicked")[0]) { // Do something if class exists } else { $('.content').removeClass('visible'); } }); $('.close').on('click', function() { $('.content').removeClass('visible'); window.location.hash = "" clicked = !clicked; }); }); body { font-size: 150%; } img { width: 50vw; height: auto; } .clicked { color: green; } .content { display: none; } .visible { display: block; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.cycle2/2.1.6/jquery.cycle2.min.js"></script> <nav> <a href="#1" id="1">1</a> <a href="#2" id="2">2</a> <a href="#3" id="3">3</a> </nav> <div class="content"> <div class="cycle-slideshow" data-cycle-slides="> div" data-cycle-timeout="0" data-cycle-prev=".prev" data-cycle-next=".next" data-cycle-speed="1" data-cycle-fx="fadeOut"> <div data-cycle-hash="1"> <img src="https://placeimg.com/640/480/animals"> </div> <div data-cycle-hash="1"> <img src="https://placeimg.com/640/480/animals/2"> </div> <div data-cycle-hash="2"> <img src="https://placeimg.com/640/480/arch"> </div> <div data-cycle-hash="2"> <img src="https://placeimg.com/640/480/arch/2"> </div> <div data-cycle-hash="3"> <img src="https://placeimg.com/640/480/nature"> </div> <div data-cycle-hash="3"> <img src="https://placeimg.com/640/480/nature/2"> </div> </div> <div class="controls"> <div class="prev">Prev</div> <div class="next">Next</div> <div class="close">Close</div> </div> </div>

EN From: Event inside click function firing outside click

More similar articles:

4 Comments

  1. si prega di rendere il frammento che ho postato per l’esecuzione. il vostro violino non è impostato correttamente

  2. la sintassi $(selector).on(... lega un ascoltatore di eventi. il vostro codice sta aggiungendo un ascoltatore di evento all’evento ‘ciclo-dopo’ ogni volta che l’ascoltatore di scatto è eseguito. ciò significa che, non appena è stato cliccato una volta, tutti gli eventi ciclo dopo da allora in poi avrà il codice eseguito. se avete cliccato più volte, avrete legato più ascoltatori, e ancora più di loro sarà in esecuzione su ogni ciclo dopo evento.

    quello che probabilmente si vuole fare è, per un clic, eseguire solo il codice dopo il primo prossimo evento ciclo dopo. per raggiungere questo obiettivo si potrebbe legare l’ascoltatore, e alla fine del callback, unbind di nuovo. qualcosa di simile:

      $('.controls').on('click', function() {
        $('.cycle-slideshow').on('cycle-after', afterCycle);
    
        function afterCycle(){
          ... your logic here ...
          $('.cycle-slideshow').off('cycle-after', afterCycle);
        }
      });

    tenete a mente che questo è ancora abbastanza fragile. se si fa clic due volte prima del primo ciclo-dopo accade, la biblioteca potrebbe solo sparare ciclo-dopo una volta e si avrà ancora un ascoltatore indesiderato legato. se questa libreria di diapositive lo supporta, sarebbe meglio semplicemente legare una volta su ‘ciclo dopo’, e quindi aggiungere un controllo che continua solo se il ciclo è stato causato da un clic.

Leave a Reply

Your email address will not be published. Required fields are marked *