php - jquery只改变一个元素

Question

您好，我有一个 php 页面，其中显示 10 篇文章，其中隐藏了阅读更多按钮文章

这是我的php代码

$query = mysql_query("SELECT * FROM stories ORDER BY id DESC LIMIT 0,10");
while ($row=mysql_fetch_array($query))
{
    echo "<div class='content_story_block'>
            <div class='content_story_block_menu'>$row[title]
                <div id='Read_More' style='display:none;' class='content_story_block_menu_span'>Read More</div>
            </div>
            <div class='content_story_block_row'>$row[brief]</div>
         </div>";
}

这是我的jQuery代码

<script type="text/javascript">
    $('.content_story_block').hover(function() {
      $('#Read_More').toggle('slow', function() {
        // Animation complete.
      });
    });
</script>

我错过了什么？

Answer 1

Read_More从 id更改为 class：

<div style='display:none;' class='content_story_block_menu_span Read_More'>
Read More</div>

然后更改您的脚本：

<script type="text/javascript">
    $('.content_story_block').hover(function() {
      $(this).find('div.Read_More').toggle('slow', function() {
        // Animation complete.
      });
    });
</script>

Answer 2

<script type="text/javascript">
    $('.content_story_block').hover(function() {
      $(this).next('#Read_More').toggle('slow', function() {
        // Animation complete.
      });
    });
</script>

Answer 3

尝试这个

<script type="text/javascript">
$('.content_story_block').hover(function() {

 $('.content_story_block_menu_span').each(function(){
      $(this).toggle('slow', function() {
    // Animation complete.
  });
  })
});