javascript 效果只对第一个元素有效，对其他元素无效？

Question

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

<!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 效果将 ID 或对 DOM 元素的 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 效果只对第一个元素有效，对其他元素无效？

javascript effect only works on the first element but not on others?

html

php

scriptaculous

prototypejs