0

我一直在尝试以老虎机滚轮的风格创建一个随机图片显示动画。用户点击“旋转”，就会出现一个 gif 图像，呈现出老虎轮旋转的效果。当轮子停止时，旋转效果 gif 图像被随机成员的图片替换。但是，随机成员的照片没有出现。在萤火虫中，我可以看到数组被正确填充，并且成员图片（带有正确的 url）都存在。问题似乎是 jQuery 脚本没有将标签添加到图像要出现的位置，我不知道为什么。用于收集数组信息的 PHP 在这里：

$q = "SELECT id, username FROM members WHERE my_sex =:req_sex";
$stmt = $dbo->prepare($q);
$stmt->execute(array(":req_sex" => $req_sex));
while($r = $stmt->fetch()) {
$m_id = $r['id'];
$m_name = $r['username'];
$m_pic .= '"members/'.$m_id.'/minis/resized_image_'.$m_id.'_0.jpg", ';
}
$m_pic = rtrim($m_pic, ', ');

我确定在某处不正确的 jQuery 在这里：

 $(document).ready(function(){ 
 images = new Array(<?php echo $m_pic; ?>);
 var length = images.length; 
 var which = Math.round(Math.random()*(length-1)); 
$('<img src="'+images[which]+'" alt="" class="randomMember"/>').prependTo('div#wheel');
};

我一直在玩这个并尝试了各种方法，并使用 firebug 进行调查，我设法实现的最好的方法是在 html 中显示以下行。

<img class="randomMember" alt="" src="" />

我不记得我是怎么做到的，但我认为它使用的是 document.write 而不是将它包装在一个函数中。我只使用 javascript 和 jQuery 一个星期左右，尽管进行了大量的谷歌搜索和阅读，但我不明白为什么这不起作用。提前致谢！

编辑：html如下：

  <div class="hidden_sidebox">
  <div id="chat_view">
  <div id="wheel">
  <img src="members/0/default_pic.jpg" alt="" class="preSpin" />
  <img src="images/randomChatWheel.gif" alt="" class="spinAnimation" style="top: -220px;" />   
 </div>

//here is where the problem jQuery script is...I think this is the correct place for it, as it will prependTo the previous div element (which I have explicitly specified anyway, just in case)

 <div id="btnPanel">
 <div id="chatButton">CHAT</div>
 <div id="spinButton">SPIN</div>
 </div>
 <div id="chatSplash"></div>
 </div>
 </div>

车轮旋转的功能（除了最终图像无法显示之外，它完全可以工作）在这里：

$(document).ready(function() { 

$("div#chatSplash").click(function () { 
    $("div#chatSplash").slideUp("fast");
    $('img.randomMember').hide();
    $('img.spinAnimation').hide();
    $('div#spinButton').removeClass('ButtonDisabled');
    $('div#chatButton').removeClass('ButtonDisabled');
 });    

 $("div#spinButton").click(function () {
    $("img.preSpin").hide();
    $("img.spinAnimation").show();
    $('div#spinButton').addClass('ButtonDisabled');
    $('div#chatButton').addClass('ButtonDisabled');
    setTimeout(function(){$("img.spinAnimation").hide();
    $('img.randomMember').show();
    $('div#spinButton').removeClass('ButtonDisabled');
    $('div#chatButton').removeClass('ButtonDisabled');
    }, 2500);

        });
    });
4

2 回答 2

1

这里有一个简单的错误，你没有关闭括号。你有：

$(document).ready(function(){ . . .};

应该是哪个

$(document).ready(function(){ . . .});
于 2012-09-24T20:19:11.140 回答
0

在 PHP 中试试这个：

$pictures = array();
while($r = $stmt->fetch()) {
    $pictures[] = sprintf('members/%d/minis/resized_image_%d_0.jpg', $r['id'], $r['id']);
}

然后在 JS 中：

images = <?php json_encode($pictures); ?>;
于 2012-09-24T20:20:20.587 回答