JQuery不能在Tumblr上工作



我对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代码允许在文本更改时多次单击按钮。

当我尝试使用jQuery时,它不会工作:http://dialoguetest2.tumblr.com/

有什么我错过了吗?我知道我必须加上

<script type="text/javascript">

并以

结尾
</script>

以使其工作。但是还有什么我错过了,像使用谷歌AJAX库API吗?

如果是,怎么可能呢?

要在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>

最新更新