Jquery - событие клика с removeClass - PullRequest
Новая
       33

Jquery - событие клика с removeClass

0 голосов
/ 19 февраля 2012

я создаю тело слайдера, но возникла проблема. У меня есть следующая предыдущая «кнопка», которая будет скользить вперед и назад. При нажатии на эту кнопку будет удален класс, который заставляет ее выполнять анимацию вперед и назад, но когда я удаляю класс, анимация все еще работает. почему?

делает вещи: 

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

кнопка вперед: 

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

кнопка назад 

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

активный / дезактивировать 

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

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>

1 Ответ

2 голосов
/ 19 февраля 2012

Метод click привязывается к элементу, когда вы делаете 

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

jQuery будет искать каждый элемент с классом nav_depois и устанавливать переданную вами функцию, чтобы она выполнялась при щелчке.

Чтобы быть более понятным, оно связывает событие, поэтому 

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

переводится как 

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

Чтобы удалить метод, вы должны использовать unbind (или off, если вы используете jQuery 1.7), например 

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

и для повторного подключения вы должны снова связать его (с помощью методов click или bind), для этого я рекомендую сохранить функцию и передать ее в качестве параметра, например: 

var navAntesFunction = function (){
//code
}

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

function actEsq () {
    navL = true;
    $('#nav_panel').find('#nav_prev').click(navAntesFunction);
}
...