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 を持つ 2 つの div があります。#1 これは、いいえ、悪い HTML です。各 div で個別にスライダーを開始する必要があります。

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

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

どこが間違っていて、なぜ機能しないのかを理解するのに十分ですか。JQuery は、使用するバナー スライドを認識していないか、実際には最初のスライドのみを使用しています。これは、ページごとに 1 つの ID しか存在しないことがわかっているためです。

スライダー プラグインがどのように機能するかはわかりませんが、ID を div 内のクラスに変更してから、スライダーを次のように開始できる場合があります。

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

また

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

プラグインの動作に依存します。

于 2013-02-10T00:57:15.190 に答える
1

要素 ID は、1 つの要素に対して一意である必要があります。2 つの要素に同じ ID を与えることはできません。ID をbanner-slide1とに変更してみてくださいbanner-slide2。

于 2013-02-10T00:57:45.783 に答える