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();
});

可能你包裹了你的功能。

以下是DEMO

Answer 2

像这样？

<强> JSFiddle Demo

$(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，因为它们都以“更多”开头。

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

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

JSFIDDLE

用jQuery显示隐藏图像

3 个答案: