jQuery代码可在测试中工作，但不在现场

Question

So I have the following code.

<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;" />

It works fine when running on its own, however when I implement this into the main site it does not work.

You can see where I have tried to implement it at the following URL.

http://jamesleist.com/portfolio

It is really confusing me :-( I am using Wordpress by the way and jQuery is linked to in the header.php file.

I am assuming this is a problem with Wordpress?

Many thanks in advance for your help.

Answer 1

.me is not the next element, the next element is a paragraph containing the image ?

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

Answer 2

Your img tags have two class attributes defined. I'm not sure if this is 100% the cause, but that should definitely be fixed.

Like this:

<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

Your images have 'class' defined twice, you can't do that. You need to include all your classes including the 'me' class inside one class declaration separated by spaces. A simple run through a validator shows the errors pretty clearly.

I would also consider moving your scripts both internal and external to the bottom of your page so that the dom isn't waiting on them to load. Moving all your inline styles into the stylesheet would be a good idea as well so your code is easier to read and debug.