0

PHPを使用してデータベースから取得したテキストを回転させるjqueryテキストローテーターがあります。これが図です：

ここに画像の説明を入力してください

次に、テキストの横に、イベントに対応するページに移動する詳細ボタンがあります（したがって、ローテーションの1つが「サンプルイベント」の場合、詳細ボタンはevent.php？id= 6に移動します。 「サンプルイベント」のIDを含む行は6です。残念ながら、moreinfo.phpボタンのリンクは常に最初のローテーションに対応するページに移動します（したがって、最初のローテーションが「サンプルイベント」で、「サンプルイベント」のIDが6の場合、 [詳細]ボタンは、id = 8の「より良いイベント」のように別のローテーションの場合でも、id=6のページに常にリンクされたままになります。

助けてくれてありがとう（これは私の説明がかなり混乱していることを私は知っています）。また、問題が何であるかがわかる場合は、解決策を少し説明していただけますか（PHPを学んでいて、私が抱えている問題の解決策を探すことで、多くのことを学ぶことができます！）

                       <div id="rotate">
                        <?php
                          while ($row = mysql_fetch_assoc($result)) {
                            $id = $row['id'];
                          echo"
                            <font>
                                ".$row['tag']."
                            </font>";
                        }?>
                        </div>
                        </div>
                    <div class='grid_2'><a href='events.php?id=<?php echo $id;?>'><button id='eventinfo'>event info &raquo;</button></a></div>

そしてここに回転コードがあります：

<script type="text/javascript">
(function($){
$.fn.extend({ 
    //plugin name - rotaterator
    rotaterator: function(options) {

        var defaults = {
            fadeSpeed: 600,
            pauseSpeed: 100,
            child:null
        };

        var options = $.extend(defaults, options);

        return this.each(function() {
              var o =options;
              var obj = $(this);                
              var items = $(obj.children(), obj);
              items.each(function() {$(this).hide();})
              if(!o.child){var next = $(obj).children(':first');
              }else{var next = o.child;
              }
              $(next).fadeIn(o.fadeSpeed, function() {
                    $(next).delay(o.pauseSpeed).fadeOut(o.fadeSpeed, function() {
                        var next = $(this).next();
                        if (next.length == 0){
                                next = $(obj).children(':first');
                        }
                        $(obj).rotaterator({child : next, fadeSpeed : o.fadeSpeed, pauseSpeed : o.pauseSpeed});
                    })
                });
        });
    }
});
})(jQuery);

$(document).ready(function() {
    $('#rotate').rotaterator({fadeSpeed:1200, pauseSpeed:6000});
}); 

    </script>
4

2 に答える 2

0

回転divを作成するときid、各反復のを保存するために各ループに非表示のフィールドを追加できます。

<div id="rotate">
<?php
$index = 0;
while ($row = mysql_fetch_assoc($result)) {
  $id = $row['id'];
  echo "<font>".$row['tag']."</font>";
  echo "<input type='hidden' id='rotate_".$index."' value='$id' />";
  $index++;
}?>
</div>

次に、上記で作成したインデックスに対応するようにjavascriptでインデックスを維持できます。テキストを回転するときは、次のようにします。

var newLinkID = $('#rotate_' + index).val();
$('.grid_2 a').attr('href', 'events.php?id=' + newLinkID);
于 2012-07-13T20:53:45.193 に答える
0

これにはいくつかの解決策があります。たとえば、次のとおりです。

  1. javascriptでアクティブIDを追跡し、ボタン/リンクにイベントハンドラーをアタッチして、デフォルトのアクションをキャンセルし（リンクをたどる）、代わりにjavascriptを使用して必要なページにリダイレクトする（jsでリンクを構築する）ことができます。
  2. リンク/ボタンをテキストローテーター内に配置してすべて非表示にactiveし、現在のクラスにクラスを追加して、そのクラスのみを表示することができます。

2番目のオプションはより多くのhtmlにつながりますが、私はすべてのページへの実際のリンクを持つという考えが好きです。

于 2012-07-13T20:48:05.560 に答える