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

的问题，为什么变量永远是回想起来，因为你在“点击”事件处理程序的范围内定义了一个新变量。你可以做的，是这样的：

加入这一行全球范围内一个封闭closure像$.ready()：

​​

而替换该行：

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

与此：

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

B如评论中所述，你应该使用一个类给一个元素一个状态。而且你可以使用像.toggleClass（）这样的函数轻松改变状态。

编辑

的要求，在评论，只有一个永远不会有 “激活” 状态，这将是一个简单的解决办法：

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