-1

私は JavaScript を使用しており、マウス ホバー時にすべての要素情報を表示しようとしています。これまでのところ、最初の要素情報のみを取得しており、2 番目の情報はアクティブではありません。すべての要素を機能させるには？

JavaScript コードは次のとおりです。

$('#user').hover(function() {
    $('#popup').show();
}, function() {
    $('#popup').hide();
}); 

<div id='user'>I am a user. Move your mouse over me</div>
<div id='popup'>Extended info about a user</div>
<div id='user'>I am a user. Move your mouse over me</div>

<div>I a piece of useless information. No use hovering over me.</div>

http://jsfiddle.net/Hyw7Z/1/

4

2 に答える 2

4

このようなことが起こらない限り、複数の要素で「id」に同じ値を使用することはできません。代わりに、「クラス」を使用してください

<div class="user" ... >

次に、JavaScript で次のようにします。

$('.user').hover(function() { ...

「ポップアップ」にも同じことが言えますが、そのためには次のようなものが必要です。

$('.user').hover(function() {
  $(this).next('.popup').show();
}, function() {
  $(this).next('.popup').hide();
});

それは、クラス「ポップアップ」を持っているホバリング<div>の後の次の要素を見つけ、それを表示/非表示にします。そのような要素がなければ、何も起こりません。

于 2013-02-26T17:32:31.603 に答える
0

ID セレクターを使用しています。ID は、1 ページに 1 回だけ配置できます。これにはクラスセレクターを使用できます。

<div class='user'>I am a user. Move your mouse over me</div>
<div id='popup'>Extended info about a user</div>
<div class='user'>I am a user. Move your mouse over me</div>

$('.user').hover(function() {
    $('#popup').show();
}, function() {
    $('#popup').hide();
});

JSFiddle。

于 2013-02-26T17:33:07.903 に答える