Question

我是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吗？

如果是这样，怎么可能？

Answer 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>

JQuery没有在Tumblr上工作？

1 个答案: