它没有显示所有图像
问题描述:
我这里有一个应用程序:application它没有显示所有图像
在我使用的是基本的jQuery的滑块,页面演示是在这里:page info
现在我遇到的问题是,它的显示器问题1中的图像,但不是问题2中的图像。现在,在我包含滑块之前,它会在所有问题中显示图像。但是因为我包含滑块,所以它只在第一个问题中显示图像。我怎样才能让图像在所有问题中显示?
CODE:
<form action='results.php' method='post' id='exam'>
<?php
foreach ($arrQuestionId as $key=>$question) {
?>
<div class='lt-container'>
<p><?php echo htmlspecialchars($arrQuestionNo[$key]) . ": " . htmlspecialchars($arrQuestionContent[$key]); ?></p>
<?php
//start:procedure image
$img_result = '';
if(empty($arrImageFile[$key])){
$img_result = ' ';
}else{
?>
<div id="banner-slide">
<ul class="bjqs">
<?php foreach ($arrImageFile[$key] as $i) { ?>
<li><img alt="<?php echo $i; ?>" height="200" width="200" src="<?php echo 'ImageFiles/'.$i; ?>"></li>
<?php } ?>
</ul>
</div>
<script type="text/javascript">
jQuery(document).ready(function($) {
$('#banner-slide').bjqs({
animtype : 'slide',
height : 200,
width : 200,
responsive : true,
randomstart : true
});
});
</script>
<?php
}
//end:procedure image
?>
</div>
<?php
}
?>
</form>
答
你有相同的ID在页面上两个div。 #1,这是一个没有坏的HTML。您将需要独立地在每个div上启动滑块。
$('#banner-slide1').bjqs({ //ETC
$('#banner-slide2').bjqs({ //ETC
这足以了解你出错的原因以及为什么它不起作用。 JQuery不知道要使用哪个横幅幻灯片,或者实际上只使用第一个幻灯片,因为它知道每个页面应该只有一个ID。
我不知道你的滑块插件是如何工作的,但你可以到IDS改为班的div,然后启动滑盖:
$('.banner-slide').bjqs({ //ETC
OR
$('.banner-slide').each(function(){
$(this).bjqs({ //ETC
这取决于插件的工作方式。
答
元素ID对于单个元素应该是唯一的。你不能给两个元素使用相同的ID。尝试将ID更改为banner-slide1
和banner-slide2
。
最佳答案,你在第一个代码片段中提到的是应该做什么 – user2048994 2013-02-10 01:10:40