0

手始めに、ここに私のphpがあります：

$id2 = mysql_real_escape_string($id2);
                $getdata8 = mysql_query("SELECT * FROM musicbook WHERE identify='$identify' ORDER BY id DESC LIMIT 20");
                $numrowsgetdata = mysql_num_rows($getdata8);
                if ((mysql_num_rows($getdata8))<1)
                {
                echo "<i>Be the first to say something?</i><p/>"; 
                }
                while ($row8 = mysql_fetch_assoc($getdata8))
                {
                $id8 = $row8['id'];
                $name8 = $row8['name'];
                $message8 = $row8['message'];
                $message10 = nl2br($message8);
                $date8 = $row8['date'];
                if ($name8==$username)
                {
                echo "
                <div class='messagediv' style='background:#1A1A1A;'><div style='padding:5px;'>$message10<br/>
                <div style='margin-top:4px; font-size:.8em; float:left;'><div style='float:left;'><a href='http://www.pearlsquirrel.com/$name8' style='color:white;'>$name8</a><font style='color:#D6D6D6'> on $date8</font></div>
                <input type='hidden' id='wpm2' value='$id8'><input type='button' id='deletelistenchat' class='deletelistenchat' style='display:none;' onclick='LinkOnClick2($id8); loadlistenchat();' value='(delete?)' /></div></div></div>
                ";
                }
                else
                {
                echo "
                <div class='messagediv'><div style='padding:5px;'>$message10<br/>
                <div style='margin-top:4px; font-size:.8em; float:left;'><div style='float:left;'><a href='http://www.pearlsquirrel.com/$name8' style='color:white;'>$name8</a><font style='color:#D6D6D6'> on $date8</font></div>
                </div></div></div>";
                }
                }
                if($numrowsgetdata >= 20)
                {
                echo "<div id='loadingcomments'><img src='loading.gif' style='height:30px; width:30px;'></div>";
                }
                ?>

これが私のjqueryです：

$('.messagediv').live('mouseover mouseout', function(event) {
    if (event.type == 'mouseover') {
    document.getElementById('deletelistenchat').style.display='block';
    } else {
    document.getElementById('deletelistenchat').style.display='none';
    }
    });

ここで私が実現したいのは、.messagediv div ごとにカーソルを合わせると、削除ボタン #deletelistenchat が表示されることです。ただし、各mysqlクエリの最後の行でのみ機能し、ユーザーがホバーすると、ホバー効果が各行で機能するようにします。たとえば、ユーザーによる最初の投稿にカーソルを合わせると、mysql クエリによって取得された最後の投稿でホバー効果がアクティブになります。私はしばらくの間これを理解しようとしてきましたが、とにかく迷っています。助けていただければ幸いです。

4

1 に答える 1

1

IDは一意です。同じIDを何度も使用しているため、DOMはそのIDを持つ最後の要素のみを検索します。これは意図した効果であり、phpの作成方法の結果です。

<input type='button' id='deletelistenchat'

このボタンからIDを削除します。あなたはすでにここにクラスを持っています。

ホバーイベントを変更しましょう。

$(function(){
  $('.messagediv').on('mouseover', function() {
    $(this).find('.deletelistenchat').css('display', 'block');
  }).on('mouseout', function(){
    $(this).find('.deletelistenchat').css('display', 'none');
  });
});

*Edit*

マークアップをはっきりと見ていないため、DOMの動作が期待どおりに機能していませんでした。それが私のせいです。jQuery 1.7に値するものにし、mouseoverステートメントとmouseoutステートメントを分離して、それらを明確に表示できるようにしました。

動作中のフィドル-> http://jsfiddle.net/6MpX9/

于 2012-04-07T18:39:38.983 に答える