Question

我从数据库中获取这些数据：

$sql = "SELECT * FROM articles WHERE uid='".$uid."'";
$res = mysql_query($sql) or die (mysql_error());

if (mysql_num_rows($res) > 0) {

    while ($row = mysql_fetch_assoc($res)) {
        $article_id = $row['id'];
        $author = $row['author'];
        $article_name = $row['article_name'];
        $num_views = $row['num_views'];
        $rate = $row['rate'];
        $times_rated = $row['times_rated'];
        $edit_time = $row['edit_time'];
        echo "<div id='list_articles'>";
        echo "<a class='normal_link' href='view_article.php?id=".$article_id."'>".$article_name."</a>";
        echo "<span class='del' id='".$article_id."'>x</span>";
        echo "</div>";
    }

我正在使用此代码用class del隐藏span：

.del {
    float:right;
    width:10px;
    text-align:center;
    color:#3B581E;
    border:1px solid #3B581E;
    display:none;
}

我想要做的是每当我mouseenter ID为list_articles的div时查看带有“del”类的spad，并且每当我mouseleave div时隐藏相同的范围，我正在使用这个jquery代码：

$(document).ready(function(){
    $('#list_articles').mouseenter(function(){
        $('span', this).show();
    }).mouseleave(function(){
        $('span', this).hide();
    });
});

效果似乎有效，但只有我的页面上的第一个结果，并不适用于下面的其余div，任何想法??

感谢您的帮助：）

Answer 1

echo "<div id='list_articles' class="listArticles">";

$(document).ready(function(){
    $('.listArticles').mouseenter(function(){
        $('span', this).show();
    }).mouseleave(function(){
        $('span', this).hide();
    });
});

Answer 2

id应该是唯一的 - 您应该将其添加/更改为类，然后将您的事件绑定到类 - 这会将所有DOM元素与该类绑定到您的事件。

PHP：

while ($row = mysql_fetch_assoc($res)) {
        $article_id = $row['id'];
        $author = $row['author'];
        $article_name = $row['article_name'];
        $num_views = $row['num_views'];
        $rate = $row['rate'];
        $times_rated = $row['times_rated'];
        $edit_time = $row['edit_time'];
        echo "<div class='list_articles'>";   /// Updated - changed id to class
        echo "<a class='normal_link' href='view_article.php?id=".$article_id."'>".$article_name."</a>";
        echo "<span class='del' id='".$article_id."'>x</span>";
        echo "</div>";
    }

JavaScript：

$(document).ready(function(){
    $('.list_articles') // changed the selector
        ...
    });
});

Answer 3

使用list_articles作为类而不是id，因为具有相同id的元素无法正常工作

mouseenter和mouseleave仅适用于第一个元素

3 个答案: