在< body>内执行JavaScript对div元素 [英] Executing JavaScript within <body> on div elements

查看：77
本文介绍了在< body>内执行JavaScript对div元素的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我试图设置一个小的'反馈'文本框，它通过一系列引号循环，以及引号来源的名称。



我的代码如下： 

 < 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（）; 
}）; 
 
函数cycleText（）{
 var text = ['One'，'Two'，'Three']，
i = 1，
 $ div = $（ '#testimonial_text'）; 
 $ b setInterval（function（）{
 $ div.fadeOut（function（）{
 $ div.text（text [i ++％text.length]）。fadeIn（）; 
}）; 
}，1000）; 
 
 
函数cycleName（）{
 var text = ['1'，'2'，'3']，
j = 1，
 $ div = $（'＃testimonial_name'）; 
 $ b setInterval（function（）{
 $ div.fadeOut（function（）{
 $ div.text（text [j ++％text.length]）。fadeIn（）; 
}）; 
}，1000）; 
} 
< / script> 
 ... 
< / body>

我已经尝试过但没有成功的事情：

替换

 < script type =text / javascript>

with 

 <脚本>

&



替换

  $（function（）{
 cycleText（）; 
 cycleName（）; 
}）;

with 

  window.onload = function（）{
 cycleText（）; 
 cycleName（）; 
}

或



<$ p （）;
cycleText（）;
cycleName（）;
}）; $ p $ document.addEventListener（DOMContentLoaded，function

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



请注意，我有一个完美的jsfiddle设置： https://jsfiddle.net/3ke2esht/3/



然而，它并没有't在这里的实际网页上工作：
删除链接后答案



任何人都可以告诉我为什么这可能是这种情况，我怎么可能修复这是什么？



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

 <！ - 可选的touchswipe文件以启用浏览幻灯片 - > 
< script type =text / javascriptsrc =head / slideshow / jquery.touchSwipe.min.js>< / script> 
 
< script type =text / javascriptsrc =head / slideshow / fadeslideshow.js> 
 
 / ***************************************** ****** 
 *终极淡入幻灯片v2.0-（c）动态驱动器DHTML代码库（www.dynamicdrive.com）
 *请保持此通知完好
 *访问动态驱动器在http://www.dynamicdrive.com/这个脚本和100多
 *************************** ******************** / 
 
< / script> 
 
< script type =text / javascript> 
 
 var gallery = new fadeSlideShow（{
 wrapperid：slideshow，//页面上的空白DIV的编号幻灯片
维度：[900，350]，//应该反映最大图像的尺寸
 imagearray：[
 [head / slideshow / 1.jpg]，
 [head / slideshow / 2.jpg ]，
 [head / slideshow / 3.jpg]，
 [head / slideshow / 4.jpg] 
]，
 displaymode：{type：'自动'，暂停：6500，循环：0，环绕：true}，
 persist：false，//记得上次浏览幻灯片并在同一会话中调用？
 fadeduration：750，//过渡时间（毫秒）
 descreveal：always，
 togglerid：
}）
 
< / script>

这是从dynamicdrive.com中略微修改过的。



显然我希望这两个脚本都能正常工作。有些东西会阻止第一个工作，但我看不到是什么！

解决方案

控制台： 

  Uncaught TypeError：$不是函数

这意味着变量 $ 与jQuery库没有正确关联。您可能正在使用另一个接管 $ 的库或调用 jQuery.noConflict（）。在你的情况下，文件 fadeslideshow.js 正在调用 noConflict（），正如@Phil所指出的那样。



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

 < script type =text / javascript> 
 jQuery（function（）{
 cycleText（）; 
 cycleName（）; 
}）; 
 
函数cycleText（）{
 var text = ['One'，'Two'，'Three']，
i = 1，
 $ div = jQuery（ '#testimonial_text'）; 
 $ b setInterval（function（）{
 $ div.fadeOut（function（）{
 $ div.text（text [i ++％text.length]）。fadeIn（）; 
}）; 
}，1000）; 
 
 
函数cycleName（）{
 var text = ['1'，'2'，'3']，
j = 1，
 $ div = jQuery（'＃testimonial_name'）; 
 $ b setInterval（function（）{
 $ div.fadeOut（function（）{
 $ div.text（text [j ++％text.length]）。fadeIn（）; 
}）; 
}，1000）; 
} 
< / script>

另外，您可以创建 closure ，它以 jquery 的正确引用作为参数，并将您的代码里面：

 < script type =text / javascript> 
（function（$）{
 $（function（）{
 cycleText（）; 
 cycleName（）; 
}）; 
 
函数cycleText（）{
 var text = ['One'，'Two'，'Three']，
i = 1，
 $ div = $（'＃testimonial_text'）; 
 
 setInterval（function（）{
 $ div.fadeOut（function（）{
 $ div.text（text [i ++％text.length]）。fadeIn（）; $ 
}，
}，$ 1000 $）
 
 
函数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的引用。



希望它有帮助。


I am trying to setup a small 'feedback' text-box that cycles through an array of quotes, along with the names of the sources of the quotes.

My code is as follows:

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

Things that I have tried and that have not worked:

Replacing

<script type="text/javascript">

with

<script>

&

Replacing

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

with

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

or

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

I know it would be more ideal to contain all of the JS within the head tags, but this is not possible with the way that the website is setup.

Please note that I have a jsfiddle set-up that works perfectly here: https://jsfiddle.net/3ke2esht/3/

However, it doesn't work on the live webpage here: REMOVED LINK POST-ANSWER

Can anyone tell me why this might be the case, and how I could potentially fix this?

EDIT: I can make it work if I remove the following code from my head:

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

Which was taken/modified slightly from dynamicdrive.com.

Obviously I want both scripts to be working. Something from this is preventing the first one from working, but I can't see what!

解决方案

There's an error message in the console:

Uncaught TypeError: $ is not a function

Which means the variable $ isn't correctly associated with the jQuery library. You may be using another library that's taking over the $ or calling jQuery.noConflict(). In your case, the file fadeslideshow.js is calling noConflict(), as noted by @Phil.

The safest solution would be to replace all references to 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>

Also, you can create a closure, which takes as parameter the correct reference to jQuery and put your code inside it:

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

This way you can correctly use the $ symbol as a reference to jQuery.

Hope it helps.

这篇关于在&lt; body&gt;内执行JavaScript对div元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆