用jQuery顯示隱藏圖像

Question

我在單獨的div中有2張圖片

<a href="javascript:void(0)" class="morebutton" ><img src="/Images/PLUS.gif" /></a>
<a href="javascript:void(0)" class="morebutton2" ><img src="/Images/MINUS.gif"/></a>

jQuery切換工作正常，但是如果我那時打開div， 則單獨可見plus.gif應該是可見的，但是對我來說，這兩個都變得可見了。

$('.morebutton').live("click", function () {
                $('.more').show();
                $('.morebutton').hide();
            });
            $('.morebutton2').live("click", function () {
                $('.more').hide();
                $('.morebutton').show();
            });

Answer 1

您可以嘗試此查詢

$('.morebutton').click(function () {
    $('.more').show();
    $(this).hide();
});
$('.morebutton2').click(function () {
    $('.more').hide();
    $('.morebutton').show();
});

可能您包裝了函數。

這是演示

Answer 2

像這樣？

JSFiddle演示

$(document).ready(function () {
    $('.morebutton2').hide();

    $('.morebutton').on("click", function () {
        $('.morebutton2').show();
        $('.morebutton').hide();
    });

    $('.morebutton2').on("click", function () {
        $('.morebutton2').hide();
        $('.morebutton').show();
    });
});

Answer 3

我們可以使用toggle()來顯示或隱藏匹配的元素。 如果最初顯示該元素，則它將被隱藏； 如果隱藏，它將顯示。

el （元素的縮寫）變量匹配.morebutton和.morebutton2這兩個類，因為它們都以“ more”開頭。

$(".morebutton2").hide();
var el = $("a[class^='more']");

$(el).click(function () {
    $(el).toggle();
});

JSFIDDLE