Question

我想这样做当用户在每个desc1，desc2和desc3 div上移动鼠标箭头时，会出现相应的地图，但是当页面和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>

Answer 1

删除一个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>

Answer 2

您的jQuery代码中存在错误。在)之后和.on

之前删除三个分号

});.on

另请参阅Pinals答案，仅包括jquery一次。

然后，为了更好的做法，将hide()函数添加到文档就绪函数中（即使它应该运行）：

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

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

Answer 3

其他答案是正确的，因为在每次调用.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>

jQuery仍然无法正常工作

3 个答案: