Question

我正在回复数据库中包含html标记的记录，并试图对回显的数据产生一些影响。当我单击编辑链接时，文本字段应该摇动。它适用于第一个元素但是当我单击下一个元素的编辑链接时，第一个文本字段仍然抖动而不是另一个。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Wallpost</title>
<style>

    .wallpost input[type="text"]{
        width: 500px;
        height: 20px;
    }

    .wallpost input[type="submit"]{
        height: 26px;
    }


    .user{
        font-weight: bold;
        font-size: 20px;
    }

    .post{
        font-family: Arial;
    }

    a{
        text-decoration: none;
    }

</style>
</head>
<body>

<?php

require_once 'dbconfig.php';



$user = $_SESSION['user'];; 

echo '<form action="post.php" method="post" class="wallpost"><input 
type="text" name="post" size="50"><input type="submit" name="wallpost" 
value="Post"></form>';

$query = $con->query("SELECT * FROM statuspost ORDER BY id DESC");

while($i = $query->fetch_object()){
    //echo $i->post.'  '.$i->id.' <a href="wallpost.php?type=post&
id='.$i->id.'" >Remove</a>'.'<br/>';
    echo '<span class="user">'.$i->user.'</span>'.'<br>'.'<span 
class="post">'.$i->post.'</span>'.' <form action="editpost.php?type=post&
id='.$i->id.'" method="post"><span id="edit"><input type="text"  
name="edit">
<br/><input type="submit" value="Edit"></span><a href="#" 
onclick="showEdit();">Edit </a><a href="remove.php?type=post&
id='.$i->id.'" >Remove</a></form> '.'<br/><br/>';
    //echo '<div id="post">'.$i->post.'  '.$i->id.'<a href="#" 
id="anchor" class="',$i->id,'" onclick="del();">Remove</a></div>  
<br/>';     

}


?>


<script src="https://ajax.googleapis.com/ajax/libs/prototype/1.7.2.0
/prototype.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/scriptaculous/1.9.0
/scriptaculous.js"></script>
<script>

 function showEdit(){

    Effect.Shake('edit');
 }

</script>
</body>
</html>

Answer 1

将<span id="edit">替换为<span id="edit'.$i->id.'">之类的内容，以便在每个元素上使用不同的ID。当然，showEdit()必须知道它必须晃动哪个ID，因此必须采用参数。甚至更简单：将onclick="showEdit();"替换为onclick="Effect.Shake(\'edit'.$i->id.'\');"

Answer 2

Scriptaculous效果将DOM元素的ID或JavaScript引用作为它们的第一个参数，所以如果你为多个元素添加一个类名，你可以像这样一次摇动所有这些：

<span class="shake-me">...</span>
<span class="shake-me">...</span>
<span class="shake-me">...</span>

在枚举器中：

$$('.shake-me').each(function(elm){
  Effect.Shake(elm);
});

javascript效果只适用于第一个元素而不适用于其他元素？

2 个答案: