PHP While 循环和 jQuery答案

【问题标题】：PHP While Loop and jQueryPHP While 循环和 jQuery
【发布时间】：2012-07-19 01:41:57
【问题描述】：

我创建了一个 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++;           
    }    
?>

【问题讨论】：

请更好地格式化您的代码

标签： php jquery

【解决方案1】：

在将元素插入 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 的图片发布到主机/父页面，只需将上述委托逻辑添加到父页面，然后只发布图片。

【讨论】：

【解决方案2】：

试试这个：

<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。

【讨论】：