0

サーバーからランダムな画像を選択して投稿するwhileループを作成しました。ここで、jqueryコードを追加して、画像の1つをクリックし、jQueryでslideUp（）関数を実行できるようにします。これが私の問題です。whileループで生成された最初の画像をクリックできますが、2番目の画像をクリックしても何も起こりません。slideUp（）関数は機能しません。どうしたらいいのかわからない。以下のコードがあります。

<script src="http://code.jquery.com/jquery-latest.js"></script>

<?php    
   $num_dresses = dress_count ();   
   $i=0;    
   while ($i < 2){  
?>

<style>     
   div:hover { border:2px solid #021a40; cursor:pointer;}      
</style>

<script>  
    $("div").click(function () {
           $(this).slideUp();    
    });
</script>   

<?php       
    $rand_id = rand(1, $num_dresses);       
    $dress_feed_data = clothing_data($rand_id, 'file_name', 'user_defined_name', 'user_defined_place' , 'user_who_uploaded', 'match_1');
    $new_file_name = $dress_feed_data['file_name']; 

    if (file_exists('fashion_images/' . $new_file_name)){

      echo str_replace("|", " ", $dress_feed_data['user_defined_name']);
?>

    <br>                    
    <div>    
     <img  src=" fashion_images/<?php echo $new_file_name;?> " width="50" height="50" />  
    <div>
        <br><br>  
    <?php      
        echo str_replace("|", " ", $dress_feed_data['user_defined_place']);      
    ?>

    <br><br>

    <?php
    }    
    $i++;           
    }    
?>
4

2 に答える 2

1

要素がDOMに挿入される前に、クリックハンドラーを要素にバインドしています。

おそらく、最初の呼び出しが行われると、divと呼ばれる要素が存在しないため、バインディングが無効になり、最初の要素が挿入されます。これで、2番目の要素のバインディングが作成され、一致するときに最初の要素にアタッチされ$('div')ます。だから、あなたはたった1つしか機能しませんでした。

クリーンな方法は、クリックバインディングをwhileループから外して、1回だけ発生するようにし、DOM準備完了イベントで呼び出すことです。

<script>
$(document).ready(function(){
  $("div").click(function(){
    $(this).slideUp();
    });
  });
</script>

また、動的に追加されたすべての画像に適用されるライブバインディングを作成する場合は、委任を使用します。

<script>
$(document).ready(function(){
  $('body').on('click',"div",function(){
    $(this).slideUp();
    });
  });
</script>

上記の画像をhtmlでホスト/親ページに投稿する場合は、上記の委任ロジックを親ページに追加し、画像のみを投稿してください。

于 2012-07-19T01:54:46.463 に答える
0

これを試して ：

<style>
div:hover { margin:10px 0; border:2px solid #021a40; cursor:pointer;}
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(function(){
    $("div.randomImage").click(function() {
        $(this).slideUp();
    });
});
</script>
<?php
$num_dresses = dress_count();
$i=0;
while ($i < 2) {
?>
<?php
    $rand_id = rand(1, $num_dresses);
    $dress_feed_data = clothing_data($rand_id, 'file_name', 'user_defined_name', 'user_defined_place' , 'user_who_uploaded', 'match_1');
    $new_file_name = $dress_feed_data['file_name'];
    if (file_exists('fashion_images/' . $new_file_name)) {
        echo str_replace("|", " ", $dress_feed_data['user_defined_name']);
?>
<div class="randomImage">
    <img src="fashion_images/<?php echo $new_file_name;?>" width="50" height="50" />
</div>
<?php
        echo str_replace("|", " ", $dress_feed_data['user_defined_place']);
    }
    $i++;
}
?>

ノート：

  • スタイルシートとスクリプトがphpwhileループの外に移動しました。繰り返しは不要であり、望ましくありません。
  • jQueryステートメントが$(function(){...})構造内にあり、ドキュメントの準備ができたときに実行されるようになりました。提供されたHTMLがブラウザによって解釈されてDOM要素が作成された後。
  • class="randomImage"がに追加されました<div>
  • 2番目<div>に変更されました</div>
  • ソースページと提供ページを読みやすくするために、PHPとHTMLは個別にインデントされています。

PHPを検証しようとはしていません。

于 2012-07-19T02:25:17.853 に答える