JQuery - Fare clic sull'evento con rimovore
-
27-10-2019 - |
Domanda
Sto creando un corpo cursore ma ho un problema. Ho un prossimo "pulsante" precedente che scivolerà in avanti e indietro. Quando si fa clic su questi pulsanti, rimuoverà la classe che lo fa per fare l'animazione per inoltrare e indietro, ma quando rimuovo la classe, l'animazione funziona ancora. perché?
Fare le cose:
esq = 0;
var navR,navL = false;
$(".caixa_pequena").each(function(){
var $element = $(this).css('left');
final = parseFloat($element) + parseFloat(esq);
$(this).css('left', parseFloat(final) + 'px');
esq = esq + 200;
});
il pulsante in avanti:
$('.nav_depois').click(function(){
desactEsq();
desactDir();
var nr = $(".caixa_pequena").size()-1;
var total = (nr * (parseInt(-200)))+ parseInt($(".caixa_pequena").css('left')) + 'px';
var m = $(".caixa_pequena").offset().left+'px';
if(total != m){
$("#texto").animate({left: '-=200'}, 'slow', function(){
/*actEsq();
actDir();*/
});
}
});
il pulsante all'indietro
$('.nav_antes').click(function(){
desactEsq();
desactDir();
var l = $(".caixa_pequena").offset().left+'px';
if(l != $(".caixa_pequena").css('left')){
$("#texto").animate({left: '+=200'}, 'slow', function(){
/*actEsq();
actDir();*/
});
}
});
l'attivo/desattivo
function desactDir () {
navR = false;
$('#nav_panel').find('.nav_depois').removeClass();
}
function desactEsq () {
navL = false;
$('#nav_panel').find('.nav_antes').removeClass();
}
function actDir () {
navR = true;
$('#nav_panel').find('#nav_next').addClass('nav_depois');
}
function actEsq () {
navL = true;
$('#nav_panel').find('#nav_prev').addClass('nav_antes');
}
});
l'HTML
<div id="caixa_grande">
<div id="texto">
<div class="caixa_pequena">SPORT LISBOA E BENFICA</div>
<div class="caixa_pequena">SPORTING CLUBE DE PORTUGAL</div>
<div class="caixa_pequena">FUTEBOL CLUBE DOS COXOS</div>
</div>
</div>
<div id="nav_panel">
<a id="nav_next" class="nav_antes"><-------|</a>
<a id="nav_prev" class="nav_depois">|--------></a>
</div>
Soluzione
Il metodo click è vincolato all'elemento, quando lo fai
$('.nav_depois').click(function(){
//code...
});
JQuery cercherà ogni elemento con una classe di nav_depois
e impostare la funzione passata in modo che venga eseguita quando si verifica un clic.
Per essere più chiari è vincolante l'evento, quindi
jQuery("element").click(f);
si traduce in
jQuery("element").bind("click", f);
Per rimuovere il metodo che dovresti usare unbind
(o off
Se stai usando JQuery 1.7), ad esempio
function desactDir () {
navR = false;
$('#nav_panel').find('.nav_depois').unbind("click");
}
e per riattaccarlo dovresti vincolarlo di nuovo (con i metodi clic o legame), per fare ciò che consiglio di memorizzare la funzione e passarla come parametro come:
var navAntesFunction = function (){
//code
}
$('.nav_antes').click(navAntesFunction);
function actEsq () {
navL = true;
$('#nav_panel').find('#nav_prev').click(navAntesFunction);
}