1

ページの3x2ブロック（中央のボックス-左）に複数の会社のロゴが表示されるようにページを設定しています。

ユーザーがロゴをクリックすると、ロゴブロックの横にある別のdiv（中央のボックスの右側）の内容が変化し、4つの異なるデータセットを表す4つのサムネイルアイコンが読み込まれます。

私が今やりたいことはこれです：

ユーザーが4つのサムネイル画像の1つにカーソルを合わせると、ロゴブロックが、選択したサムネイル画像に関連する情報を含む非表示のdiv（mid-box-right1）のコンテンツに置き換えられます。また、マウスをサムネイルから離すと、ロゴブロックが再表示されます。

現在、ロゴをクリックすると、最初のdivのコンテンツが完全に読み込まれますが、2番目のdivの画像にカーソルを合わせると、ロゴブロックがmid-box-right1非表示divのコンテンツに置き換えられることはありません。

私はそれを次のように設定しました：

<div id="HiddenContainerOne" style="display:none;">
    <div id="mid-box-left1"><a href="#" class="testbox1"><-- content here --></a></div>
</div>

<div id="HiddenContainerTwo" style="display:none">
    <div id="mid-box-right1"><-- content here --></a></div>
</div>

<div id="mid-box-right">
    <a href="#" class="logo-change"><-- logo here --></a>
</div>

<div id="mid-box-left">
    <-- content here -->    
</div>

そして、JQueryは次のとおりです。

$(document).ready(function() {

$(".logo-change").click(function() {
    $("#mid-box-left").fadeOut(500, function() {
        $("#mid-box-left").html($("#mid-box-left1").html())
        .hide()
        .fadeIn(500, function () {
            $('#mid-box-left');
        });
    });
    return false;
});

$(".testbox1").mouseover(function() {
        $("#mid-box-right").html($("#mid-box-right1").html())
        .hide()
        .fadeIn(500, function () {
            $('#mid-box-right');
        });
    return false;
});
});
4

2 に答える 2

1

問題は、hiddencontaineroneのhtmlをコピーしていることです

$('foo').html($('link').html());

これはイベントをコピーしません。したがって、マウスオーバーイベントはコピーされたリンクには存在しません。clone代わりに、コピー後にイベントハンドラーを使用または再バインドする必要があります。

onまたは、マウスオーバーイベントの上位レベルのノードを利用して監視することもできます。

http://jsfiddle.net/jByc7/

$('body').on('mouseover', '.testbox1', function() {
        console.log('mouseover');
        $("#mid-box-right").html($("#mid-box-right1").html())
        .hide()
        .fadeIn(500, function () {
            $('#mid-box-right');
        });
    return false;
});​
于 2012-09-28T01:52:48.723 に答える
0

これでyorjqueryコードをラップします

このチェックは、ドキュメントがすべてのhtml要素をロードしたかどうかを確認します

$(document).ready(function(){

//your jquery code

 });
于 2012-09-28T01:47:33.087 に答える