1

私は5カ国に5つの旗を持っています。誰かがフラグにマウスオーバーすると、それぞれの div が表示されます。マウスアウトの場合、div は非表示になります。フラグがクリックされた場合、div を表示したままにして、mouseout イベントを無効にします。次のコーディングではすべて問題ありませんが、誰かがフラグをクリックすると、前のフラグは機能せず、次のフラグがクリックされます。最初に最後の 1 つのフラグをクリックすると、前のフラグはどれも機能しません!!!

誰か助けてください。

読んでくれてありがとう。

    <!-- popup UN -->
<div class="popup popup_hide popup_un" id="popup_un">
    <div class="popup_top"></div>
    <div class="popup_country">
        <img src="images/usa.gif" alt="USA">  
        <a href="#" class="hide_popup"><span class="close"></span></a>
        <div class="popup_country_text"> 
            <div class="popup_country_text_normal">  
            </div>
            <div class="btn_email_us"><a href="#"><img src="images/btn_email.jpg" alt="email us"></a></div>
        </div>
    </div>
</div> 


 <div id="footer_flag">
<a href="#" class="showPopup showPopupClicked" rel="popup_au"><img id="popup_au_img" src="images/au.gif" alt="AU"></a>
<a href="#" class="showPopup showPopupClicked" rel="popup_nz"><img id="popup_nz_img" src="images/nz.gif" alt="AU"></a>
<a href="#" class="showPopup showPopupClicked" rel="popup_uk"><img id="popup_uk_img" src="images/uk.png" alt="UK"></a>
<a href="#" class="showPopup showPopupClicked" rel="popup_canada"><img id="popup_canada_img" src="images/canada.png" alt="Canada"></a>
<a href="#" class="showPopup showPopupClicked" rel="popup_usa"><img id="popup_usa_img" src="images/usa.gif" alt="USA"></a>
<a href="#" class="showPopup showPopupClicked" rel="popup_un"><img id="popup_un_img" class="footer_flag_un" src="images/un.png" alt="UN"></a>


$(document).ready(function(){

    $('.showPopup').mouseover( function() {
        $('.popup').hide();
        $('#' + $(this).attr('rel')).show()  
    });


    $('.showPopup').mouseout( function() {
        $('.popup_hide').hide(); 

    });             

    $('.hide_popup').click( function() {
        $('.popup').hide(); 
        $('img').removeClass('border_grey'); 

    });


    $('.showPopupClicked').click( function() {
        $('a').removeClass('showPopup');
        $('img').removeClass('border_grey');
        $('.' + $(this).attr('rel')).removeClass('popup_hide');
        $('#' + $(this).attr('rel') + '_img').addClass('border_grey');

    }); 
});

]

4

2 に答える 2

2

コード：

var mouseOver = function() {
    //$('.popup').hide();
    $('#' + $(this).attr('rel')).show();
};

var mouseOut = function() {
    //$('.popup').hide();
    $('#' + $(this).attr('rel')).hide();
};

$('.showPopup').mouseover(mouseOver);
$('.showPopup').mouseout(mouseOut);

$('.showPopup').click(function() {
    $('#' + $(this).attr('rel') + '_img').removeClass('border_grey');
    if ($(this).hasClass("selected")) {
        $('#' + $(this).attr('rel')).hide();
        $(this).removeClass("selected");

        $(this).bind("mouseover", mouseOver);
        $(this).bind("mouseout", mouseOut);
    } else {
        $(this).addClass("selected");
        $('#' + $(this).attr('rel') + '_img').addClass('border_grey');
        $('#' + $(this).attr('rel')).show();

        $(this).unbind("mouseover", mouseOver);
        $(this).unbind("mouseout", mouseOut);
    }
});

働くフィドル

于 2012-10-30T08:57:56.947 に答える
0

試す$('#' + $(this).attr('rel') + '_img').show()

また、実際に class.popupを持っているものは何もないので、何が$('.popup').hide();達成されるのかわかりません。

于 2012-10-30T06:43:30.650 に答える