将jQuery脚本传输到外部文件


transfer jQuery script to external file

我直接在html文件中编写脚本,它添加了一些分页功能,并且它工作得很好,直到它在html文件中,但我只是无法获得如何将此脚本传输到外部js文件并使其从那里运行。这里是html部分:

<form id="moredisplay" method="get" style="display:inline;">
            <input class="hiddeninteger" type="hidden" name="loadmore" value="">
            <!--LIMIT CHANGER-->
            <input type="checkbox" title="" id="limitcheck" name="limit" value="<?php echo $vsego;?>" style="display:none;">
            <input type="checkbox" title="" id="skipforfcheck" name="skip_items" value="" style="display:none;">
            <input type="checkbox" title="" id="skipbackcheck" name="skip_items" value="" style="display:none;">
            <button type="submit" title="back" value="" id="rerurn_more_items"/>back</button>
            <button type="submit" title="next" value="" id="skip_more_items"/>fowards</button>
            <button type="submit" title="more content" value="<?php echo $vsego;?>" id="limit" name="limit" onclick=""/>more content</button>
            <script>
                var currentval = jQuery('.scippeditems').attr('value');
                jQuery('#skip_items,#rerurn_items').attr('value',currentval);
                var valuenumber = jQuery('#skip_items').val();
                if (valuenumber == 0){
                jQuery('#rerurn_items').attr('disabled', 'disabled').css({'opacity':'0.6'});
                }
                var itemsshow = jQuery('#limit').val();
                var pagescount = (jQuery('#skip_items').attr('value'))/(jQuery('#limit').attr('value'));
                if(pagescount >=5){jQuery('#skip_items, #limit').attr('disabled', 'disabled').css({'opacity':'0.6'});}//COUNT PAGES AND LOCK NEXT
                function changepageforf(){
                var elem = document.getElementById("skip_items");
                var currentval = elem.value;
                elem.value = parseInt(currentval) + 24;}//parseInt(itemsshow);}
                function changepageback(){
                var elem = document.getElementById("rerurn_items");
                var currentval = elem.value;
                elem.value = parseInt(currentval) - 24;}//parseInt(itemsshow);}
                </script>
                <script>
                jQuery(document).ready(function(){
                jQuery('#limit').click(changelimit);//RUN FUNCTION ON LIMIT CHANGE
                if ( document.location.href.indexOf('&limit') > -1 ) {//IF URL CONTAINS LINES LIMIT
                jQuery('#rerurn_items, #skip_items').hide()//HIDE PAGINATION
                jQuery('#rerurn_more_items, #skip_more_items').show()//SHOW LIMIT PAGINATION
                var checkval = jQuery('#limitcheck').attr('value');
                var currentvalskip = jQuery('.scippeditems').attr('value');
                jQuery('#skipforfcheck').attr('value', (parseInt(checkval)+parseInt(currentvalskip)));//NEXT BTN VALUE
                var currentforfaction = jQuery('#skipforfcheck').attr('value')
                jQuery('#skipbackcheck').attr('value',Math.ceil( ( (parseInt(currentforfaction)-parseInt(checkval) ) - parseInt(checkval) ) ) );//PREV BTN VALUE
                var pagescount = (jQuery('#skipforfcheck').attr('value'))/(jQuery('#limitcheck').attr('value'));
                if(pagescount >=5){jQuery('#skip_more_items, #limit').attr('disabled', 'disabled').css({'opacity':'0.6'});}//COUNT PAGES AND LOCK NEXT
                if( jQuery('#skipbackcheck').attr('value') <= 0 ){ jQuery('#skipbackcheck').attr('value', 0 );}//RETURN 0 AS A VALUE IF NEGATIVE
                jQuery('#skip_more_items').click(function(){//SUBMIT NEXT BTN
                    jQuery('#limitcheck').attr('checked', true);
                    jQuery('#skipforfcheck').attr('checked', true);
                    jQuery('#moredisplay').submit()
                });
                jQuery('#rerurn_more_items').click(function(){//SUBMIT PREV BTN
                    jQuery('#limitcheck').attr('checked', true);
                    jQuery('#skipbackcheck').attr('checked', true);
                    jQuery('#moredisplay').submit()
                });
                }
                function changelimit(){//LIMIT INCREASE STEP
                var elem = document.getElementById("limit");
                var currentval = elem.value;
                elem.value = parseInt(currentval) + 6;}//HOW MUCH
                var valuenumber = jQuery('#skip_items').val();
                if (valuenumber == 0){//HIDE PREV BTN IF NO PREV
                jQuery('#rerurn_more_items').attr('disabled', 'disabled').css({'opacity':'0.6'});
                }
                });
            </script>
    </form>

我所做的尝试:复制脚本并放入pagination.js文件中,并在页面顶部调用脚本,如

$document =& JFactory::getDocument();
$document->addScript("jquery/pagination.js");

但这不起作用…我是jQuery新手,如果我笨的话请不要怪我:L)

你需要把你的代码包装成:

$(document).ready( function() {
    // your code here 
});

正如Aspiring Aqib指出的,您需要使用

启动JQuery脚本
$(document).ready( function() {
    // your code here 
});

$(function() {
    // your code here 
});

这基本上是说,"等到DOM完全创建后再执行该函数内的脚本。"

关于在$(function(){//code goes here});块中包装jQuery代码,Aspiring Aqib和Dave都是正确的。

然而,一个更常见的错误是没有按照正确的顺序加载jQuery库文件和你自己的。js文件,这可能很难发现,因为在你的编辑器或浏览器中没有任何警告。 jQuery库必须放在你自己的。js文件之前