日期:2014-05-16  浏览次数:20342 次

jQuery如何将下面这段代码简化。

$('#logo11a').mousemove(function () {$('#logo11').fadeIn(100);});
$('#logo11a').mouseleave(function () { $('#logo11').fadeOut(100); });
$('#logo12a').mousemove(function () { $('#logo12').fadeIn(100); });
$('#logo12a').mouseleave(function () { $('#logo12').fadeOut(100); });
$('#logo13a').mousemove(function () { $('#logo13').fadeIn(100); });
$('#logo13a').mouseleave(function () { $('#logo13').fadeOut(100); });
$('#logo14a').mousemove(function () { $('#logo14').fadeIn(100); });
$('#logo14a').mouseleave(function () { $('#logo14').fadeOut(100); });
$('#logo15a').mousemove(function () { $('#logo15').fadeIn(100); });
$('#logo15a').mouseleave(function () { $('#logo15').fadeOut(100); });
$('#logo16a').mousemove(function () { $('#logo16').fadeIn(100); });
$('#logo16a').mouseleave(function () { $('#logo16').fadeOut(100); });
$('#logo17a').mousemove(function () { $('#logo17').fadeIn(100); });
$('#logo17a').mouseleave(function () { $('#logo17').fadeOut(100); });
$('#logo18a').mousemove(function () { $('#logo18').fadeIn(100); });
$('#logo18a').mouseleave(function () { $("#logo18").fadeOut(100); });

------解决方案--------------------
为你的那些相同的事件加个.actions动class
用JQ写不是很简单吗?
$(".actions").mousemove(function(){
   $(this).fadeIn(100);
});
$(".actions").mouseleave(function(){
   $(this).fadeOut(100);
});
------解决方案--------------------
for (var i = 11; i <= 18; i++) {
  $('#logo'+i+'a').mousemove(function () {$('#logo'+i).fadeIn(100);});
  $('#logo'+i+'a').mouseleave(function () { $('#logo'+i).fadeOut(100); });
}

------解决方案--------------------
其实牵涉到批量操作的时候,都不怎么利用 id去操作,id的唯一性,而且一般基于布局的实现来根据当前触发事件的元素,去查找要操作的对象
比如页面结构
<div>
    <a class="link"></a>
    <p>1</p>
</div>
<div>
    <a class="link"></a>
    <p>2</p>
</div>
<div>
    <a class="link"></a>
    <p>3</p>
</div>

$('.link').click(function(){
$(this).parent().find('p').hide();//点击class为link的时候将对应的p隐藏
});

------解决方案--------------------
这样写适合你风格,不是很好吗,不用改了