0

我在这里有一个应用程序：应用程序

在演示中，我使用了一个基本的 jquery 滑块，这里是哪个页面：页面信息

现在我遇到的问题是它显示问题 1 中的图像，而不是问题 2 中的图像。现在在我包含滑块之前，它显示了所有问题中的图像。但由于我包含了滑块，所以它只显示第一个问题中的图像。如何让图像显示在所有问题中？

代码：

<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 = '&nbsp;';
        }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>
4

2 回答 2

1

页面上有两个具有相同 ID 的 div。#1 是一个没有和不好的 HTML。您将需要在每个 div 上独立启动滑块。

$('#banner-slide1').bjqs({ //ETC

$('#banner-slide2').bjqs({ //ETC

这是否足以了解您出错的地方以及为什么它不起作用。JQuery 不知道要使用哪个横幅幻灯片，或者它实际上只使用第一个，因为它知道每页应该只有一个 ID。

我不知道您的滑块插件是如何工作的，但您可以将 id 更改为 div 中的类，然后使用以下命令启动滑块：

$('.banner-slide').bjqs({ //ETC

或者

$('.banner-slide').each(function(){
    $(this).bjqs({ //ETC

这取决于插件的工作方式。

于 2013-02-10T00:57:15.190 回答
1

元素 ID 对于单个元素应该是唯一的。不允许为两个元素提供相同的 ID。尝试将 ID 更改为banner-slide1和banner-slide2。

于 2013-02-10T00:57:45.783 回答