Question

我一直在尝试以老虎机车轮的风格创建随机图片显示动画。用户单击“旋转”并显示gif图像，从而产生槽轮旋转的效果。当车轮停止时，旋转效果gif图像被随机成员的图片替换。但是，随机成员的图片没有出现。在firebug中，我可以看到阵列正在正确填充，并且成员图片（具有正确的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);

        });
    });

Answer 1

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

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

哪个应该是

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

Answer 2

在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); ?>;

如何使用jQuery从php数组中显示随机图像？

2 个答案: