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

单独运行时工作正常，但是当我将其实现到主站点时，它不起作用。

您可以在以下网址查看我尝试实施的位置。

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

您的图片已经定义了两次“课程”，您不能这样做。您需要在一个以空格分隔的类声明中包含所有类，包括'me'类。简单地浏览validator可以非常清楚地显示错误。

我还会考虑将内部和外部脚本移动到页面底部，这样dom就不会等待它们加载。将所有内联样式移动到样式表中也是一个好主意，因此您的代码更易于阅读和调试。

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

3 个答案: