PHP While Loop and jQuery - PHP While Loop and jQuery

我创建了一个while循环，从服务器中选择随机图像并发布。现在我想添加一些jquery代码，允许我点击其中一个图像并在jquery中运行slideUp（）函数。这是我的问题。我可以点击while循环中生成的第一个图像，但当我点击第二个图像时，什么都不会发生。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++;           
    }    
?>

在元素插入DOM、之前，您将点击处理程序绑定到元素

可能在进行第一次调用时，没有名为div的元素，因此绑定变为void，然后插入第一个元素。现在第二个元素的绑定已经完成，现在它将附加到第一个元素，因为它匹配$('div')。所以你只得到了一个工作。

干净的方法是从while循环中去掉点击绑定，这样它只发生一次，并在DOM就绪事件上调用它

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

如果你想制作一个实时绑定，它适用于所有动态添加的图像，也可以使用委托：

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

如果你用html将上面的图片发布到主机/父页面，只需将上面的委派逻辑添加到父页面，然后只发布图片。

试试这个：

<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++;
}
?>

注：

样式表和脚本在php while循环之外移动。重复是不必要的，也是不希望的
jQuery语句现在位于$(function(){...})结构中，以确保它在文档准备就绪时运行，即在浏览器对所提供的HTML进行解释以创建DOM元素之后
class="randomImage"添加到<div>
第二个<div>更改为</div>
为了源代码和服务页面的可读性，PHP和HTML是独立缩进的

我没有尝试验证PHP。