0

我有一个 jquery 文本旋转器，它使用 PHP 旋转从数据库中提取的文本。这是一个图表：

在此处输入图像描述

然后，文本的一侧有一个更多信息按钮，该按钮将转到事件的相应页面（因此，如果其中一个旋转是“示例事件”，那么更多信息按钮将转到 event.php?id= 6如果包含“示例事件”的 id 的行是 6。不幸的是，moreinfo.php 按钮链接总是转到第一个旋转对应的页面（所以如果第一个旋转是“示例事件”并且“示例事件”的 id 为 6，那么更多信息按钮将始终链接到 id=6 的页面，即使它的轮换不同，例如 id=8 的“更好的事件”。

感谢您的帮助（我知道我的描述很混乱）。另外，如果你能说出问题所在，你能解释一下你的解决方案吗（我正在学习 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

有几种解决方案，例如：

  1. 您可以在 javascript 中跟踪活动 ID，并将事件处理程序附加到您的按钮/链接以取消默认操作（按照链接），而是使用 javascript 重定向到所需的页面（在 js 中构建链接）；
  2. 您可以将链接/按钮放在文本旋转器内并将它们全部隐藏，将一个active类添加到当前类并仅显示该类。

虽然第二个选项会导致更多的 html，但我有点喜欢拥有指向所有页面的真实链接的想法。

于 2012-07-13T20:48:05.560 回答
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 回答