jQuery Хранение элемента в переменной

Question

У меня есть код, ниже которого при щелчке элемента списка происходит анимация.

У меня возникают проблемы с созданием элемента списка при повторном нажатии на обратный эффект анимации.

Я пытаюсь сохранить элемент с щелчком в переменной, но проблема с этим, так как моя переменная никогда не хранит детали элементов?

Может быть, лучший способ сделать это, но любая помощь или совет были бы замечательными?

<ul class="circles"> 
    <li class="c-1"><div class="c-1-active">Text Link</div></li> 
    <li class="c-2"><div class="c-1-active">Text Link</div></li> 
    <li class="c-3"><div class="c-1-active">Text Link</div></li> 
    </ul> 



$('#home ul.circles li').click(function() { 
    alert(testing); 
    if(testing > "" || testing == $(this).find('div')) 
    { 
     testing.animate({opacity: 0, top:'180px'}, 1000); 
    } 
     $(this).find('div').animate({opacity: 0.8, top:'0'}, 1000); 
     var testing = $(this).find('div'); 

}); 

Answer 1

Вы хотите toggle функцию:

$('#home ul.circles li').toggle(function() { 
    $(this).find('div').stop().animate({opacity: 0, top:'180px'}, 1000); 
},function() { 
    $(this).find('div').stop().animate({opacity: 0.8, top:'0'}, 1000) 
}); 

UPDATE: По вашему комментарию, это решение должно быть более предпочтительным:

$('#home ul.circles li').click((function(){ 
    var prevElement = null; 
    return function(){    
     //Hiding previously active element 
     prevElement && $(prevElement).stop().animate({opacity: 0, top:'180px'}, 1000); 

     var curElement = $(this).find('div').get(0); 
     $(curElement).stop().animate({opacity: 0.8, top:'0'}, 1000); 
     prevElement = curElement; 
    }; 
})()); 

Answer 2

Проблема, почему переменная не является вызывается, потому что вы определяете новую переменную в пределах области действия обработчика события «on click». Что вы можете сделать, это:

Добавьте эту строку в глобальную область объемлющей closure как $.ready():

var testing = null; 

И заменить эту строку:

var testing = $(this).find('div'); 

с этим:

testing = $(this).find('div'); 

B ut, как указано в комментариях, вы должны использовать класс, чтобы дать элементу состояние. И вы можете использовать такие функции, как .toggleClass(), чтобы легко изменить состояние.

EDIT

В соответствии с просьбой в комментариях, что только один будет когда-либо иметь "активное" состояние, это было бы простое решение:

JavaScript:

<script> 

$(document).ready(function() { 

    var circles = $('#home ul.circles li'); 
    var current = 0; 

    circles.click(function(event) { 

     var position = circles.index($(event.target).parent()); 

     if (current != position) { 

      circles.eq(current).animate({ opacity: 0.5 }, 1000); 
      current = position; 
      circles.eq(current).animate({ opacity: 1 }, 1000); 
     } 

     event.preventDefault(); 

    }); 

}); 

</script> 

CSS :

<style> 

    #home ul.circles > li { 
     opacity:  0.5; 
    } 

    #home ul.circles > li.c-1 { 
     opacity:  1.0; 
    } 

</style> 

HTML:

<div id="home"> 
    <ul class="circles"> 
     <li class="c-1"><div class="c-1-active">Text Link</div></li> 
     <li class="c-2"><div class="c-1-active">Text Link</div></li> 
     <li class="c-3"><div class="c-1-active">Text Link</div></li> 
    </ul> 
</div> 

Answer 3

Один из способов добавить класс clicked

Это должно работать хорошо:

$('#home ul.circles li').click(function() { 
    alert(testing); 
    if($(this).hasClass('clicked')) { 
     $(this).find('div').animate({opacity: 0, top:'180px'}, 1000); 
     $(this).removeClass('clicked'); 
    } else { 
     $(this).find('div').animate({opacity: 0.8, top:'0'}, 1000); 
     $('.clicked').removeClass('clicked'); 
     $(this).addClass('clicked'); 
    } 
});