Question

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

enter image description here

然后文本侧面有一个更多信息按钮，它将转到事件的相应页面（因此，如果其中一个旋转是“示例事件”，则更多信息按钮将转到event.php？id = 6 如果包含“Example Event”的id的行是6.不幸的是，moreinfo.php按钮链接总是转到第一个旋转对应的页面（所以如果第一个旋转是“Example Event”并且“示例事件”具有id 6，然后更多信息按钮将始终保持链接到id = 6的页面，即使它具有不同的旋转，例如具有id = 8的“A Better Event”。

感谢您的帮助（我知道我的描述非常令人困惑）。另外，如果你能分辨出问题所在，你能解释一下你的解决方案吗（我正在学习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>

Answer 1

有几种解决方案，例如：

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

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

Answer 2

制作旋转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);

php按钮链接与JQuery

2 个答案: