jQuery仍然不起作用

我想这样做，当用户将鼠标箭头移动到每个desc1，desc2和desc3 div上时，会显示相应的地图，但是当页面和jQuery脚本运行时，不会隐藏任何地图。jQuery仍然不起作用

<head> 
<script src="js/jquery.min.js"  type="text/javascript"></script> 

<script type='text/javascript' src='js/jquery-1.10.1.js'></script> 
</head> 

<div id="desc1" class="descriptions">Head Office Map</div> 
<div id="desc2" class="descriptions">Office Map 2</div> 
<div id="desc3" class="descriptions">Office Map 3</div> 
<div id="themaps1" class="mymaps"> Head Office Map <img src="map1.jpg"/> </div> 
<div id="themaps2" class="mymaps"> Office Map2 <img src="map2.jpg"/></div> 
<div id="themaps3" class="mymaps"> Office Map3 <img src="map3.jpg"/> </div> 


<script type="text/javascript"> 
$('.mymaps').hide(); 

$('#desc1').on('mouseover', function() {  
     $('#themaps1').fadeIn(); 
    });.on('mouseout', function() { 
     $('#themaps1').fadeOut(); 
    }); 


     $('#desc2').on('mouseover', function() {  
     $('#themaps2').fadeIn(); 
    });.on('mouseout', function() { 
     $('#themaps2').fadeOut(); 
    }); 

      $('#desc3').on('mouseover', function() {  
     $('#themaps3').fadeIn(); 
    });.on('mouseout', function() { 
     $('#themaps3').fadeOut(); 
    }); 

</script>

来源

2014-02-08 Robert Kang

你为什么要加载jQuery两次？ – j08691

我把它放在'$（function（）{$（'.mymaps'）。hide（）;}）;'所以它在文档准备好后运行。 – jtheman

摆脱你的ons'; .on'之间的分号 – j08691

有在错误的Ĵ查询代码。 )后删除三个分号之前.on

});.on

也可参考Pinals答案，只包括jQuery的一次。

那么对于好的做法，添加hide()功能到文档准备功能（即使它无论如何都应该运行）：

$(function() 
{ 
    $('.mymaps').hide(); 
});

工作的jsfiddle http://jsfiddle.net/C49AW/

来源

2014-02-08 22:11:15 jtheman

删除的jQuery的文件之一：

<script src="js/jquery.min.js" type="text/javascript"></script> 
<script type='text/javascript' src='js/jquery-1.10.1.js'></script>

使用jQuery ready事件和删除;语法错误：

<script type="text/javascript"> 
$(function() { 
    $('.mymaps').hide(); 

    $('#desc1').on('mouseover', function() {  
     $('#themaps1').fadeIn(); 
    }).on('mouseout', function() { 
     $('#themaps1').fadeOut(); 
    }); 


    $('#desc2').on('mouseover', function() {  
     $('#themaps2').fadeIn(); 
    }).on('mouseout', function() { 
     $('#themaps2').fadeOut(); 
    }); 

    $('#desc3').on('mouseover', function() {  
     $('#themaps3').fadeIn(); 
    }).on('mouseout', function() { 
     $('#themaps3').fadeOut(); 
    }); 
}); 
</script>

来源

2014-02-08 22:10:19 Pinal

其他的答案中，你必须是正确的在每次调用.on（...）和两个jQuery包含之前，都需要额外的分号。不过，我想指出的是，有一个更简单的方法可以解决这个问题。通过简单地为每个描述添加一个自定义的数据属性，你可以构建一个完成所有任务的函数。像这样JSFiddle：

<head> 
    <script src="js/jquery.min.js" type="text/javascript"></script> 
</head> 
<div id="desc1" class="descriptions" data-map="#themaps1">Head Office Map</div> 
<div id="desc2" class="descriptions" data-map="#themaps2">Office Map 2</div> 
<div id="desc3" class="descriptions" data-map="#themaps3">Office Map 3</div> 
<div id="themaps1" class="mymaps"> Head Office Map <img src="map1.jpg"/> </div> 
<div id="themaps2" class="mymaps"> Office Map2 <img src="map2.jpg"/></div> 
<div id="themaps3" class="mymaps"> Office Map3 <img src="map3.jpg"/> </div> 

<script type="text/javascript"> 

$(function() { 
    $('.mymaps').hide(); 

    $('[data-map]').each(function(i, node) { 
     var $node = $(node), mapSel = $node.attr('data-map'), $map = $(mapSel); 
     $node 
     .on('mouseover', function() { $map.fadeIn() }) 
     .on('mouseout', function() { $map.fadeOut() }) 
    }) 
}) 
</script>

来源

2014-02-08 22:36:00 Keith

这段代码遍历所有具有'data-map'属性的元素，并为每个元素添加两个处理程序。 '$ map'变量是'data-map'属性中指定的映射的jQuery选择器 – Keith

回答

相关问题