Question

im la création d'un corps de curseur, mais a un problème. J'ai un « bouton » suivant précédent qui glisser vers l'avant et vers l'arrière. Lorsque ces boutons est cliqué, il sera retiré de la classe qui en font faire l'animation avant et en arrière, mais quand je supprimer la classe, l'animation fonctionne toujours. pourquoi?

faire les choses:

    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;   
});

le bouton vers l'avant:

$('.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();*/
        }); 
    }   
});

le bouton vers l'arrière

$('.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 / désactiver actif

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');
}
});

le code 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>
Était-ce utile?

La solution

La méthode de clic est binded à l'élément, quand vous faites

$('.nav_depois').click(function(){
//code...
});

jQuery recherchera tous les éléments avec une classe de nav_depois et définir la fonction que vous avez passé donc il sera exécuté en cas de clic.

Pour être plus clair, il est contraignant l'événement, donc

jQuery("element").click(f);

se traduit

jQuery("element").bind("click", f);

Pour supprimer la méthode que vous devez utiliser unbind (ou off si vous utilisez jQuery 1.7), par exemple

function desactDir () {
    navR = false;
    $('#nav_panel').find('.nav_depois').unbind("click");
}

et rattachez vous devez lier à nouveau (avec le clic ou lier des méthodes), de faire que je recommande de conserver la fonction et de la transmettre comme paramètre comme:

var navAntesFunction = function (){
//code
}

$('.nav_antes').click(navAntesFunction);

function actEsq () {
    navL = true;
    $('#nav_panel').find('#nav_prev').click(navAntesFunction);
}
Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top