Код jQuery, работающий в тестировании, но не на сайте

Question

Итак, у меня есть следующий код.

<script src="http://jamesleist.com/wp-content/uploads/2013/01/js/jquery-1.7.2.min.js" type="text/javascript"></script> 
<script> 
    $(document).ready(function() { 
     $('.me').hide(); 
     $('.clickme').click(function() { 
      $(this).next('.me').animate({ 
       height: 'toggle' 
      }, 500); 
     }); 
    }); 
</script>  

<div class="clickme" style="background-color: #333333; color: #FFFFFF; padding: 10px; width: 200px; cursor:pointer;"> 
    Click here to toggle me in and out =) 
</div> 
<img class="me" src="http://www.randomsnippets.com/wp-content/uploads/2011/04/2.png" alt="It&#039;s me....ah!!!" title="Allen Liu" width="100" height="77" class="alignnone size-full wp-image-552" style="border: none;" /> 

<div class="clickme" style="background-color: #333333; color: #FFFFFF; padding: 10px; width: 200px; cursor:pointer;"> 
    Click here to toggle me in and out =) 
</div> 
<img class="me" src="http://www.randomsnippets.com/wp-content/uploads/2011/04/2.png" alt="It&#039;s me....ah!!!" title="Allen Liu" width="100" height="77" class="alignnone size-full wp-image-552" style="border: none;" /> 

Он отлично работает, когда работает сама по себе, однако, когда я реализую это в основной сайт не работает.

Вы можете увидеть, где я пытался реализовать его по следующему URL.

http://jamesleist.com/portfolio

Это действительно заблуждение меня :-(Я использую Wordpress, кстати, и JQuery связан в файле header.php.

Я предполагаю, что это проблема с Wordpress?

заранее большое спасибо за вашу помощь.

Answer 1

.me не следующий элемент, следующий элемент является пункт, содержащий изображение?

$(document).ready(function() { 
    $('.me').hide(); 
    $('.clickme').on('click', function() { 
     $(this).next('p').find('.me').animate({ 
      height: 'toggle' 
     }, 500); 
    }); 
}); 

Answer 2

Ваши img метки имеют два class Определены атрибуты. Я не уверен, что это причина 100%, но это определенно должно быть исправлено.

Как это:

<img class="me alignnone size-full wp-image-552" src="http://www.randomsnippets.com/wp-content/uploads/2011/04/2.png" alt="It&#039;s me....ah!!!" title="Allen Liu" width="100" height="77" style="border: none;" /> 

Answer 3

Ваши изображения имеют «класс», определенный дважды, вы не можете этого сделать. Вам нужно включить все классы, включая класс «я» внутри одного объявления класса, разделенного пробелами. Простой прогон через validator показывает ошибки довольно четко.

Я также рассмотрел бы перемещение ваших сценариев как внутренних, так и внешних в нижней части страницы, чтобы дом не ожидал их загрузки. Перемещение всех ваших встроенных стилей в таблицу стилей было бы хорошей идеей, поэтому ваш код легче читать и отлаживать.