Jquery 第二次单击元素时关闭toggleClass

我刚开始编写JQuery，我的toggleClass函数有问题。我编写了一个简单的函数，当元素被选中时，它会更改元素的样式。然后，当选择另一个图元时，样式将从上一个图元中删除并放置在新图元上。这是有效的。我的问题是，当您第二次单击当前具有样式的元素时，样式不会被删除。我希望在再次单击元素时删除样式。我粘贴了下面的代码，但您可以在JSFIDLE中看到一个工作示例：

谢谢大家!

HTML

JS

---

问题在于

.photochange

单击处理程序中的逻辑。首先从所有元素中删除该类，然后为单击的元素重新启用该类。这意味着所单击的只能处于“打开”状态

相反，在单击的元素上切换该类，但仅将其从该元素的

同级（）

中删除：

$('.photochange').click(function () {
    $(this).toggleClass('teamchange').siblings().removeClass('teamchange');
});

---

还要注意，我稍微整理了一下您的代码，因为您创建了一个未使用的jQuery对象，并且有一个嵌套的DOMReady处理程序。

没问题，很乐意提供帮助。

.photochange h4{
    display:none;
}

.teamchange h4{
    display:block;
    z-index: 50;
    float: left;
    position: absolute;
}


.teamchange img{
z-index: -10;
    border:5px solid #7bc32b;
}

    $('.stylingchange').click(function(){
    $('.wwaiconchange').removeClass('wwaiconchange');
    $(this).toggleClass('wwaiconchange');
})



    $('.photochange').click(function(){
        $('.teamchange').removeClass('teamchange');
        $(this).toggleClass('teamchange');

    });


$('img[data-char=togglephoto1]')
    $(function(){
        $('.toggledesc').hide();

        $('.togglephoto').on('click', function(){
            var toggleid = $(this).attr('data-toggleid');
            $('.toggledesc').not('.' +toggleid).slideUp("slow");
            $('.' +toggleid).slideToggle("slow");
        });

    });

$('.photochange').click(function () {
    $(this).toggleClass('teamchange').siblings().removeClass('teamchange');
});