我正在尝试设置一个小的“反馈”文本框，该文本框循环显示一组引号以及引号来源的名称。
我的代码如下:
<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();
});
我知道将所有 JS 包含在 head 标签中会更理想，但网站的设置方式不可能做到这一点。
请注意，我有一个 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 中提取/修改。
显然，我希望这两个脚本都能正常工作。这导致第一个无法正常工作，但我看不出是什么!
最佳答案
控制台出现错误信息:
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 的引用。
希望对您有所帮助。
关于javascript - 在 div 元素的 <body> 中执行 JavaScript，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32449114/