0

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

2 回答 2

1

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

可能在第一次调用时没有称为 div 的元素存在，因此绑定变为无效，然后插入第一个元素。现在已经完成了第二个元素的绑定，现在它在匹配时附加到第一个元素$('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 将上述图像发布到主机/父页面，只需将上述委托逻辑添加到父页面，然后仅发布图像。

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

笔记：

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

我没有尝试验证 PHP。

于 2012-07-19T02:25:17.853 回答