3

別の .js ファイルに入れたい、stackoverflow で適切な jQuery スクリプトを見つけました。

複数のページでファイルを使用したいので、これを行いたいです。

このコードを特定のページのスクリプトタグ内に配置すると機能しますが、頭の中で参照すると機能しません。

   (function ($) {

// jQuery autoGrowInput plugin by James Padolsey

$.fn.autoGrowInput = function (o) {

    o = $.extend({
        maxWidth: 1000,
        minWidth: 10,
        comfortZone: 10
    }, o);

    this.filter('input:text').each(function () {

        var minWidth = o.minWidth || $(this).width(),
            val = '',
            input = $(this),
            testSubject = $('<div/>').css({
                position: 'absolute',
                top: -9999,
                left: -9999,
                width: 'auto',
                fontSize: input.css('fontSize'),
                fontFamily: input.css('fontFamily'),
                fontWeight: input.css('fontWeight'),
                letterSpacing: input.css('letterSpacing'),
                whiteSpace: 'nowrap',
                textIndent: 0
            }),
            check = function () {

                if (val === (val = input.val())) { return; }

                // Enter new content into testSubject
                var escaped = val.replace(/&/g, '&amp;').replace(/\s/g, '&nbsp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
                testSubject.html(escaped);

                // Calculate new width + whether to change
                var testerWidth = testSubject.width(),
                    newWidth = (testerWidth + o.comfortZone) >= minWidth ? testerWidth + o.comfortZone : minWidth,
                    currentWidth = input.width(),
                    isValidWidthChange = (newWidth < currentWidth && newWidth >= minWidth)
                                            || (newWidth > minWidth && newWidth < o.maxWidth);

                // Animate width
                if (isValidWidthChange) {
                    input.width(newWidth);
                }

            };

        testSubject.insertAfter(input);

        $(this).bind('keyup keydown blur update', check);

        // Resize the input to the correct size from the beginning.
        check();

    });

    return this;

};       })(jQuery);           $('input').autoGrowInput();

これは私がそれを行う方法です：

これを別のファイルに入れます：

    (function ($) {

    // jQuery autoGrowInput plugin by James Padolsey

    $.fn.autoGrowInput = function (o) {

        o = $.extend({
            maxWidth: 1000,
            minWidth: 10,
            comfortZone: 10
        }, o);

        this.filter('input:text').each(function () {

            var minWidth = o.minWidth || $(this).width(),
                val = '',
                input = $(this),
                testSubject = $('<div/>').css({
                    position: 'absolute',
                    top: -9999,
                    left: -9999,
                    width: 'auto',
                    fontSize: input.css('fontSize'),
                    fontFamily: input.css('fontFamily'),
                    fontWeight: input.css('fontWeight'),
                    letterSpacing: input.css('letterSpacing'),
                    whiteSpace: 'nowrap',
                    textIndent: 0
                }),
                check = function () {

                    if (val === (val = input.val())) { return; }

                    // Enter new content into testSubject
                    var escaped = val.replace(/&/g, '&amp;').replace(/\s/g, '&nbsp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
                    testSubject.html(escaped);

                    // Calculate new width + whether to change
                    var testerWidth = testSubject.width(),
                        newWidth = (testerWidth + o.comfortZone) >= minWidth ? testerWidth + o.comfortZone : minWidth,
                        currentWidth = input.width(),
                        isValidWidthChange = (newWidth < currentWidth && newWidth >= minWidth)
                                                || (newWidth > minWidth && newWidth < o.maxWidth);

                    // Animate width
                    if (isValidWidthChange) {
                        input.width(newWidth);
                    }

                };

            testSubject.insertAfter(input);

            $(this).bind('keyup keydown blur update', check);

            // Resize the input to the correct size from the beginning.
            check();

        });

        return this;

    };

})(jQuery);

次に、次のようにレイアウトから呼び出します。

<head>
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="http://code.jquery.com/jquery-migrate-1.1.1.min.js"></script>
    <script src="~/Scripts/Forms/dynamicFormSize.js"></script>
</head>
<body>
    <script type="text/javascript">
        $(document).ready(function () {
            $('input').autoGrowInput();
        });
    </script>

    // REST OF SITE HERE...
</body>

それでも機能しません。MVC フレームワークを使用していることを付け加えておきます。

コンソール エラー: Uncaught TypeError: オブジェクト [オブジェクト オブジェクト] にメソッド 'autoGrowInput' がありません

$('input').autoGrowInput(); と同じように、.js ファイルがソースに含まれているとも言えます。

4

4 に答える 4

1

最初に参照jqueryしてからスクリプトを確認してください

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="yourScript.js"></script>

次に、ドキュメントの準備ができたら関数を呼び出します。

<script type="text/javascript">
$('document').ready(function(){
  $('input').autoGrowInput();
});
</script>
于 2013-03-21T22:54:37.633 に答える
0 
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="yourScript.js"></script>
<script type="text/javascript">
    $('document').ready(function(){
        autoGrowInput();
    });
</script>

ブラウザのキャッシュをクリアして、もう一度テストしてください。

于 2013-09-30T03:56:18.077 に答える