显示隐藏图像与jQuery

Show hide image with jQuery

本文关键字：jQuery 图像 隐藏 显示      更新时间：2023-09-26

我有两张图片在单独的div

<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 + .gif应该单独可见，但这里对我来说都是可见的。

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

我们可以使用toggle()来显示或隐藏匹配的元素。如果元素最初被显示，它将被隐藏;如果隐藏，它将被显示。

el (element的缩写)变量匹配.morebutton和.morebutton2类，因为它们都以"more"开头。

$(".morebutton2").hide();
var el = $("a[class^='more']");
$(el).click(function () {
    $(el).toggle();
});

JSFIDDLE

像这样?

<

JSFiddle演示/strong> 

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

您可以尝试这个查询

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

可能你包装了你的函数。

这是DEMO

相关文章：