Question

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

Answer 1

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

可能在第一次调用时，没有名为div的元素，因此绑定变为void，然后插入第一个元素。现在对第二个元素进行绑定，现在它与第一个元素匹配$('div')。所以你只有一个人工作。

干净的方法是将click绑定从while循环中取出，这样它只发生一次，并在DOM ready事件上调用它

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

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

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

如果您使用html将上述图片发布到主页/父页面，只需将上述委托逻辑添加到父页面，并仅发布图像。

Answer 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(){...})结构中，以确保它在ducument准备就绪时运行，即。在服务的HTML被浏览器解释为创建DOM元素之后。
class =“randomImage”添加到<div>
第二个<div>已更改为</div>
为了提供源和服务页面的可读性，PHP和HTML是独立缩进的。

我没有尝试验证PHP。

PHP While Loop和jQuery

2 个答案: