jQuery все еще не работает

Я хочу сделать так, чтобы пользователь перемещал стрелку мыши по каждому из разделов desc1, desc2 и desc3, появляется соответствующая карта, но ни одна из карт не скрыта при запуске скрипта страницы и 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

Есть ошибки в J Код запроса. Удалите три после запятой ) и до .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' является селектором jQuery для карты, указанной в атрибуте' data-map' – Keith

jQuery все еще не работает

ответ

Смежные вопросы