Question

我正在尝试设置一个小的“反馈”文本框，它循环显示一系列引号，以及引号来源的名称。

我的代码如下：

<head>
    ...
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    ...
</head>

<body>
    ...
    <div id="testimonial_text">One</div>
    <div id="testimonial_name">1</div>

    <script type="text/javascript">
        $(function () {
            cycleText();
            cycleName();
        }); 

        function cycleText() {
            var text = ['One','Two','Three'],
                i = 1,
                $div = $('#testimonial_text');

            setInterval(function() {
                $div.fadeOut(function () {
                    $div.text(text[i++ % text.length]).fadeIn();
                });
            }, 1000);
        }

        function cycleName() {
            var text = ['1','2','3'],
                j = 1,
                $div = $('#testimonial_name');

            setInterval(function() {
                $div.fadeOut(function () {
                    $div.text(text[j++ % text.length]).fadeIn();
                });
            }, 1000);
        }
    </script>
    ...
</body>

我尝试过但没有奏效的事情：

更换

<script type="text/javascript">

与

<script>

＆安培;

更换

$(function () {
    cycleText();
    cycleName();
});

与

window.onload=function() {
    cycleText();
    cycleName();  
}

或

document.addEventListener("DOMContentLoaded", function() {
    cycleText();
    cycleName();
});

我知道在head标签中包含所有JS会更理想，但这不可能通过网站的设置方式实现。

请注意，我有一个jsfiddle设置在这里完美运作：https://jsfiddle.net/3ke2esht/3/

但是，它在这里的实时网页上不起作用：删除链接后答案

任何人都可以告诉我为什么会出现这种情况，以及我如何解决这个问题？

编辑：如果我从头脑中删除以下代码，我可以使它工作：

<!-- optional touchswipe file to enable swipping to navigate slideshow -->
<script type="text/javascript" src="head/slideshow/jquery.touchSwipe.min.js"></script>

<script type="text/javascript" src="head/slideshow/fadeslideshow.js">

/***********************************************
* Ultimate Fade In Slideshow v2.0- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* Please keep this notice intact
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
***********************************************/

</script>

<script type="text/javascript">

var gallery=new fadeSlideShow({
    wrapperid: "slideshow", //ID of blank DIV on page to house Slideshow
    dimensions: [900, 350], //width/height of gallery in pixels. Should reflect dimensions of largest image
    imagearray: [
        ["head/slideshow/1.jpg"],
        ["head/slideshow/2.jpg"],
        ["head/slideshow/3.jpg"],
        ["head/slideshow/4.jpg"]
    ],
    displaymode: {type:'auto', pause:6500, cycles:0, wraparound:true},
    persist: false, //remember last viewed slide and recall within same session?
    fadeduration: 750, //transition duration (milliseconds)
    descreveal: "always",
    togglerid: ""
})

</script>

从dynamicdrive.com稍微采取/修改了。

显然我希望这两个脚本都能正常工作。这样的事情阻止了第一个工作，但我看不到什么！

Answer 1

控制台中出现错误消息：

Uncaught TypeError: $ is not a function

这意味着变量$与jQuery库没有正确关联。您可能正在使用其他图书馆来接管$或致电jQuery.noConflict()。在您的情况下，文件fadeslideshow.js正在调用noConflict()，如@Phil所述。

最安全的解决方案是替换jQuery的所有引用。

<script type="text/javascript">
    jQuery(function () {
        cycleText();
        cycleName();
    }); 

    function cycleText() {
        var text = ['One','Two','Three'],
            i = 1,
            $div = jQuery('#testimonial_text');

        setInterval(function() {
            $div.fadeOut(function () {
                $div.text(text[i++ % text.length]).fadeIn();
            });
        }, 1000);
    }

    function cycleName() {
        var text = ['1','2','3'],
            j = 1,
            $div = jQuery('#testimonial_name');

        setInterval(function() {
            $div.fadeOut(function () {
                $div.text(text[j++ % text.length]).fadeIn();
            });
        }, 1000);
    }
</script>

另外，您可以创建一个closure，它将jQuery的正确引用作为参数，并将您的代码放入其中：

<script type="text/javascript">
    (function($) {
        $(function () {
            cycleText();
            cycleName();
        }); 

        function cycleText() {
            var text = ['One','Two','Three'],
                i = 1,
                $div = $('#testimonial_text');

            setInterval(function() {
                $div.fadeOut(function () {
                    $div.text(text[i++ % text.length]).fadeIn();
                });
            }, 1000);
        }

        function cycleName() {
            var text = ['1','2','3'],
                j = 1,
                $div = $('#testimonial_name');

            setInterval(function() {
                $div.fadeOut(function () {
                    $div.text(text[j++ % text.length]).fadeIn();
                });
            }, 1000);
        }
    })(jQuery);
</script>

这样您就可以正确使用$符号作为jQuery的引用。

希望它有所帮助。

在div元素

1 个答案: