0

スロット マシンのホイールのスタイルで、ランダムな画像表示アニメーションを作成しようとしています。ユーザーが「スピン」をクリックすると、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 を 1 週間程度しか使用していません。Google でいろいろ調べたり読んだりしたにもかかわらず、なぜこれがうまくいかないのかわかりません。前もって感謝します！

編集: 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 に答える