我正在使用script.aculo.us在我的mvc php网站上制作幻灯片来制作动画。模型从数据库中查找图像，将其填入视图，然后javascript使用script.aculo.us为其设置动画。但是，当它到达第二张幻灯片时，它会停止工作，我可以在Chrome的控制台中找到此错误消息：
未捕获的TypeError：无法调用未定义的方法'getStyle'
我无法理解为什么它不起作用。这是代码。有什么想法吗？
PHP：
<div id="main">
<div id="mainContainer">
<div id="showcaseContent">
<?php $i = 0; foreach($showcase as $ShowcaseItems): ?>
<div id="showcaseSlide<?php echo $i; ?>" <?php if($i != 0){ echo 'style="display: none;"'; }else{ echo 'style="display: block;"'; } ?> >
<img src="<?php echo $ShowcaseItems['showcase_image']; ?>" width="720px" height="275px" />
</div>
<?php ++$i; endforeach ?>
</div>
</div>
的Javascript （我必须使用前4个循环，因为客户端可以将2-10个图像放到展示幻灯片上）：
var slides = new Array();
for(i=0; i<=10; i++){
slides[i] = "showcaseSlide"+i;
if(document.getElementById(slides[i]) == null) break;
};
var wait = 5000;
function startShowcase(){
setInterval(showcase(), wait);
};
function showcase(){
var i = 0;
Effect.Fade(slides[i], {duration: 1.0, from: 1.0, to: 0.0});
i++
if(i == slides.count - 1) {i=0};
Effect.Appear(slides[i], {duration: 1.0, from: 0.0, to: 1.0});
};
修改
错误出现在script.aculo.us附带的effects.js脚本的第544行，其中（据我可以解决）是在以下代码中以'from：'开头的行：
Effect.Appear = function(element) {
element = $(element);
var options = Object.extend({
from: (element.getStyle('display') == 'none' ? 0.0 : element.getOpacity() || 0.0),
Uncaught TypeError: Cannot call method 'getStyle' of undefined
to: 1.0,
// force Safari to render floated elements properly
afterFinishInternal: function(effect) {
effect.element.forceRerendering();
},
beforeSetup: function(effect) {
effect.element.setOpacity(effect.options.from).show();
}}, arguments[1] || { });
return new Effect.Opacity(element,options);
};
以下是呈现页面的相关部分：
<!DOCTYPE html>
<head>
<!--Title-->
<title>Urban Feather | Home</title>
<!--CSS Styles-->
<link rel="stylesheet" href='http://www.example.com/2012/styles/layout.css' type="text/css" media="screen, projection" />
<link rel="stylesheet" href='http://www.example.com/2012/styles/forms.css' type="text/css" media="screen, projection" />
<link rel="stylesheet" href='http://www.example.com/2012/styles/fonts.css' type="text/css" media="screen, projection" />
<!--Javascript Scripts-->
<script src="http://www.example.com/2012/scripts/sonOfSuckerfish.js" type="text/javascript"></script>
<script src="http://www.example.com/2012/scripts/script.aculo.us/prototype.js" type="text/javascript"></script>
<script src="http://www.example.com/2012/scripts/script.aculo.us/scriptaculous.js?load=effects" type="text/javascript"></script>
<script src="http://www.example.com/2012/scripts/selectreplace.js" type="text/javascript"></script>
<script src="http://www.example.com/2012/scripts/showcase.js" type="text/javascript"></script>
<script src="http://twitter.com/javascripts/blogger.js" type="text/javascript"></script>
</head>
<div id="main">
<div id="mainContainer">
<div id="showcaseContent">
<div id="showcaseSlide0" style="display: block;" >
<img src="http://www.example.com/2012/images/showcase/client3.jpg" width="720px" height="275px" />
</div>
<div id="showcaseSlide1" style="display: block;" >
<img src="http://www.example.com/2012/images/showcase/client3.jpg" width="720px" height="275px" />
</div>
<div id="showcaseSlide2" style="display: block;" >
<img src="http://www.example.com/2012/images/client3.jpg" width="720px" height="275px" />
</div>
</div>
答案 0 :(得分：0)
http://prototypejs.org/api/element/getStyle
如果元素是，则Safari为任何非内联属性返回null 隐藏（显示设置为'无'）。
<?php if($i != 0){ echo 'style="display: none;"'; }else...
function showcase(){
var i = 0;
Effect.Fade(slides[i], {duration: 1.0, from: 1.0, to: 0.0});
//slide[0] is the only slide without display:none,
//so the first slide (slide[0]) works (Fades)!
//Once var i increments, everything is display:none and the
//getStyle used in prototypes Effect.Appear method doesn't work
i++
if(i == slides.count - 1) {i=0};
Effect.Appear(slides[i], {duration: 1.0, from: 0.0, to: 1.0});
//slides[1] has display:none so getStyle in Appear breaks
};
认为这是计数器的问题：
var i = 0;
Effect.Fade(slides[i], {duration: 1.0, from: 1.0, to: 0.0});
i++
if(i == slides.count - 1) {i=0};
Effect.Appear(slides[i], {duration: 1.0, from: 0.0, to: 1.0});
i时， 0始终为showcase()，因此在第二个时间间隔内，它会尝试slides[0] Effect.Fade第一次已经消失了。
这有效：
var slides = new Array();
var count = 0;
for(i=0; i<=10; i++){
slides[i] = "showcaseSlide"+i;
if(document.getElementById(slides[i]) == null) break;
};
var wait = 1000;//shortened because I'm impatient
function startShowcase(){
setInterval(showcase, wait);
};
function showcase(){
if(count==slides.length-1){
count=0;
}
if($(slides[count]).style.display==='none'){
Effect.Appear(slides[count], {duration: 1.0, from: 0.0, to: 1.0});
}else{
Effect.Fade(slides[count], {duration: 1.0, from: 1.0, to: 0.0});
}
count++;
};
var slides = [], count = 0, wait = 4000;
for(var i in $('showcaseContent').select('div')){slides[i] = "showcaseSlide"+i;};
function startShowcase(){setInterval(showcase, wait);};
function showcase(){
(count==slides.length)?count=0:count=count;
($(slides[count]).style.display==='none')?
Effect.Appear(slides[count], {duration: 1.0, from: 0.0, to: 1.0}):
Effect.Fade(slides[count], {duration: 1.0, from: 1.0, to: 0.0});
count++;
};
startShowcase();
YEAH
答案 1 :(得分：0)
感谢stormdrain和我的其他帖子（break loop based on an element not existing），我已经解决了这个问题。循环不起作用，因为在渲染div之前调用它并且代码需要稍微重组。这是我的工作代码：
var count = 0; //A loop for the counter
var wait = 4000; //The amount of time (ms) inbetween transitions
var slides = []; //The empty array of slide ids
function startShowcase(){
for(var i=0; i<10; i++){
slides[i] = "showcaseSlide"+i;;
if(!document.getElementById(slides[i])) break;
};
setInterval(showcase, wait);
};
function showcase(){
if(count==slides.length-2){
count=0;
}
if(document.getElementById(slides[count]).style.display==='none'){
Effect.Appear(slides[count], {duration: 1.0, from: 0.0, to: 1.0});
}else{
Effect.Fade(slides[count], {duration: 1.0, from: 1.0, to: 0.0});
}
count++;
};