JQuery 不能在 Tumblr 上运行？答案

【问题标题】：JQuery not working on Tumblr?JQuery 不能在 Tumblr 上运行？
【发布时间】：2014-05-16 21:56:02
【问题描述】：

我对 JQuery 有点陌生。我一直在尝试使用这个 Jquery http://jsfiddle.net/54pp2/2/，

<input id="click" type="button" value="click" />
<label id="test">Test</label>

$(document).ready(function () {
    var textArray = [];
    textArray[0] = 'test 1';    
    textArray[1] = 'test 2';    
    textArray[2] = 'test 3';    
    textArray[3] = 'test 4';    

    var idx = 0;
    $('input#click').on('click', function() {
        idx++;
        var newidx = idx % textArray.length;
        $('label#test').text(textArray[newidx]);
    });
});

但是当我把它放在我的主题代码中时，它不会工作，即使 jsfiddle 显示它工作得很好。

如果你想看：http://dialoguetest.tumblr.com/

（当你点击侧边栏上的粉色按钮时，描述文本会发生变化。但你只能点击一次，不像 jQuery 代码可以让按钮被点击几次来改变文本。）

当我尝试使用 jQuery 时，它不起作用：http://dialoguetest2.tumblr.com/

我有什么遗漏吗？我知道我必须添加

<script type="text/javascript">

并以

结束

</script>

为了让它工作。但是我还缺少什么，比如使用 Google AJAX Libraries API？

如果是这样，怎么可能？

【问题讨论】：

“这行不通”，你能详细说明一下吗？
Tumblr 不提供 jQuery，您需要在脚本之前包含它。我建议使用 Google 的 CDN：developers.google.com/speed/libraries/devguide#jquery
您是否遇到任何错误？您是否在项目中包含了 jQuery 库？
@cowls 哦，对不起！我编辑了我的问题以详细说明什么不起作用！

标签： javascript jquery html tumblr

【解决方案1】：

要在 HTML 页面中进行这项工作，您需要在 head 中放置对 jQuery 的脚本引用以及您的 JS 代码（在 DOM 就绪处理程序中）。像这样的：

<!DOCTYPE html>
<html>
    <head>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
        <script type="text/javascript>
            $(document).ready(function () {
                var textArray = [];
                textArray[0] = 'test 1';    
                textArray[1] = 'test 2';    
                textArray[2] = 'test 3';    
                textArray[3] = 'test 4';    

                var idx = 0;
                $('input#click').on('click', function() {
                    idx++;
                    var newidx = idx % textArray.length;
                    $('label#test').text(textArray[newidx]);
                });
            });
        </script>
    </head>

    <body>
        <input id="click" type="button" value="click" />
        <label id="test">Test</label>            
    </body>
</html>

【讨论】：

将脚本/代码放在标记之后不是更有意义吗？
哦，我通常将代码放在之后和标记之前。错了吗？
@mikedidthis 这当然是一个选择，尽管它对页面性能没有影响。
@RoryMcCrossan 浏览器不是必须先下载jquery.min.js 才能继续处理文档的其余部分吗？
@mikedidthis 没有。浏览器将打开多个连接，因此它们可以一次下载多个内容。此外，如果您使用的是 jQuery 的 CDN 副本，如我的示例所示，很可能它已经被缓存，因此无论如何都不需要再次下载。