0

別の画像にカーソルを合わせると表示される要素のリストを作成しようとしています。

このようなもの

<ul id="test">
 <li id="sidebarList_1">Image 1</li>
 <li id="sidebarList_2">Image 2</li>
 <li id="sidebarList_3">Image 3</li>
<ul>


<div id="imgDiv_1">
    <img src="http://www.freemacware.com/wp-content/images/smultron1.png" />
</div>
<div id="imgDiv_2">
    <img src="http://www.freemacware.com/wp-content/images/smultron2.png" />
</div>
<div id="imgDiv_3">
    <img src="http://www.freemacware.com/wp-content/images/smultron3.png" />
</div>

私のjQueryは次のようになります

$(this).mouseover(function() {
    $("#imgDiv_1").css('visibility','visible'); 
}),

$(this).mouseout(function() { 
    $("#imgDiv_1").css('visibility','hidden'); 
});

ご覧のとおり、現在のように静的です。liのid要素の番号を取得するために次のようなことを試みました（ex sidebarList_1 ）：

$(this).mouseover(function() {   
    var myString = $(this).val().split("_").pop();   
    $("#imgDiv_" + myString).css('visibility','visible'); 
}),

$(this).mouseout(function() { 
    var myString = $(this).val().split("_").pop();
    $("#imgDiv_" + myString).css('visibility','hidden'); 
});

しかし、これは機能しません。どうすればImがやろうとしていることを達成できますか？

4

4 に答える 4

5

私はあなたの要素にdata-*属性を追加します、その値は関連するものに対応します：lidiv

<ul id="test">
 <li id="sidebarList_1" data-img="imgDiv_1">Image 1</li>
 <li id="sidebarList_2" data-img="imgDiv_2">Image 2</li>
 <li id="sidebarList_3" data-img="imgDiv_3">Image 3</li>
<ul>

次に、次のjQueryを使用します。

$("#test").on("mouseover mouseout", "li", function () {
    $("#" + $(this).data("img")).toggle();
});​

これが実際の例です。

これは、2番目の引数としてセレクターを使用するメソッドを使用して、イベントの委任を利用します（各要素onに1つではなく、1つのイベントハンドラーのみがあります）。これは、要素がデフォルトで非表示になってliいることを前提としているため、マウスオーバーすると、呼び出しによってホバーが表示されます。divtogglediv

役立つ参考資料

于 2012-07-04T07:22:40.163 に答える
0

これを使ってみてください

$("#test li").mouseover(function() {   
    var myString = $(this).attr("id").replace("sidebarList_","");   
    $("#imgDiv_" + myString).css('visibility','visible'); 
});

$("#test li").mouseout(function() { 
    var myString = $(this).attr("id").replace("sidebarList_","");  
    $("#imgDiv_" + myString).css('visibility','hidden'); 
});
于 2012-07-04T07:21:39.150 に答える
0

$(this)またはの使用方法を学ぶ必要がありますthis。あなたがそれを使用している方法、それは実際には何も言及していません。使いたいときはこんなthis感じ

$('div').click(function(){
    $(this) //<--- refers to the div that was clicked
});

使用できます

$('div').hover(
    function(){ //<-- Mouse in

    }
);function(){  //<-- Mouse out

};
于 2012-07-04T07:23:05.233 に答える
0

ホバーアイテムのリンクを作成することで、セマンティックを改善し、キーボードにアクセスしやすくし、自分自身で簡単にします。

<ul id="test">
 <li id="sidebarList_1"><a href="#imgDiv_1">Image 1</a></li>
 <li id="sidebarList_2"><a href="#imgDiv_2">Image 2</a></li>
 <li id="sidebarList_3"><a href="#imgDiv_3">Image 3</a></li>
<ul>

およびJquery：

$('#test li a').bind('mouseenter focusin',function() {
    $($(this).attr('href')).show();
}).bind('mouseleave focusout',function() {
    $($(this).attr('href')).hide();
});

これは、文字列の操作をいじくり回していることを意味します。ユーザーがブラウザでJSをオフにしている場合でも、関連するアイテムはセマンティックにリンクされています。

于 2012-07-04T07:28:06.437 に答える