Question

我是编写JQuery的新手，我的toggleClass函数存在问题。我写了一个简单的函数，在选择元素时会改变元素的样式。然后，当选择另一个元素时，样式将从前一个元素中移除并放置在新元素上。那很有效。我的问题是，当您第二次单击当前具有样式的元素时，样式不会被删除。我希望在第二次单击元素时删除样式。我粘贴了下面的代码，但你可以在jsfiddle中看到一个工作示例： http://jsfiddle.net/Ana32/pumyjgev/

谢谢！

HTML

<div class="portfolio">


                    <div class="portfoliowork photochange">

                        <img src="images/icon.png" class="togglephoto" data-toggleid="toggledesc4">
                    </div>


                    <div class="portfoliowork photochange">

                        <img src="images/icon.png" class="togglephoto" data-toggleid="toggledesc5">
                    </div>

                    <div class="portfoliowork photochange">
                        <img src="images/icon.png" class="togglephoto" data-toggleid="toggledesc6">
                    </div>

                    <div class="whowearetext toggledesc toggledesc4">
                        <h4>Title</h4>
                        <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem.</p>
                        <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est.
</p>
                    </div>

                <div class="whowearetext toggledesc toggledesc5">
                        <h4>Title</h4>
                        <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem.</p>
                        <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est.
</p>
                    </div>


                    <div class="whowearetext toggledesc toggledesc6">
                        <h4>Title</h4>
                        <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem.</p>
                        <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est.
</p>
                    </div>
                        </div>

CSS

.photochange h4{
    display:none;
}

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


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

JS

    $('.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");
        });

    });

Answer 1

.photochange点击处理程序中的逻辑是个问题。首先从所有元素中删除该类，然后将其切换回 on 以查找已单击的元素。这意味着点击后只能处于“开启”状态。

相反，在单击的元素上切换类，但只从该元素的siblings()中删除它：

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

Updated fiddle

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

第二次单击元素时关闭toggleClass

1 个答案: