Jquery添加第二个类(如果缺少)和类选择器

Jquery添加第二个类(如果缺少)和类选择器,jquery,html,css,Jquery,Html,Css,我有一个网站,我正在工作。当你们点击am图像时,它会打开一个div中一个人的信息。我是通过在jQueryUI中使用toggleClass来实现的。我需要在单击其他div时关闭任何打开的div。我想我可以用一个:不是这样的选择器 $('.teamMember').click( function(){ $('.teamMemberContent:not.teamInactive').addClass('.teamInactive');

我有一个网站,我正在工作。当你们点击am图像时,它会打开一个div中一个人的信息。我是通过在jQueryUI中使用toggleClass来实现的。我需要在单击其他div时关闭任何打开的div。我想我可以用一个:不是这样的选择器

        $('.teamMember').click(
        function(){
            $('.teamMemberContent:not.teamInactive').addClass('.teamInactive');
            var teamMemberID = $(this).attr('data-teamMember');
            $('#'+teamMemberID).toggleClass('teamInactive');
        });
但我不认为我在使用:这里不正确。任何指导都将不胜感激

这是我的HTML

                    <div class="teamWrapper">
            <div id="teamHeader">
                <h1>Meet Our Team</h1>
            </div>
            <div class="teamMember" data-teamMember="teamDavidContent">
                <div class="teamImageWrapper">
                    <img src="images/team/dave.jpg">
                </div>
                <div class="teamMemberName">
                    <h3>Name</h3>
                    <h3>Big Shot</h3>
                </div>
            </div>
            <div class="teamMember" data-teamMember="teamLauraContent">
                <div class="teamImageWrapper">
                    <img src="images/team/laura.jpg">
                </div>
                <div class="teamMemberName">
                    <h3>Name 1.5</h3>
                    <h3>Sub Boss</h3>
                </div>
            </div>
            <div class="teamMember" data-teamMember="teamAudraContent">
                <div class="teamImageWrapper">
                    <img src="images/team/audra.jpg">
                </div>
                <div class="teamMemberName">
                    <h3>Name 2 </h3>
                    <h3>Underling 1</h3>
                </div>
            </div>
            <div class="teamMemberContent teamInactive" id="teamDavidContent">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras in suscipit lacus. Nam nec purus vitae odio placerat volutpat. In tempor arcu ut ante gravida pretium. Quisque id convallis orci. Ut sit amet vehicula eros. Nam sit amet dui eleifend, vestibulum ipsum eu, tempor nisl. Quisque aliquet, tellus et vehicula luctus, justo mi convallis leo, ut ornare tortor ex id nulla. Duis nec tempor arcu. Sed odio mi, gravida in sem et, cursus pretium neque.</p>
                <p>Sed dolor turpis, pharetra sit amet tortor nec, auctor porta purus. Duis imperdiet quam egestas eros dictum lobortis. Cras aliquam venenatis neque in convallis. Ut in metus ut nibh tristique semper. Donec posuere elementum egestas. Suspendisse vestibulum semper dolor id elementum. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            </div>
            <div class="teamMemberContent teamInactive" id="teamLauraContent">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras in suscipit lacus. Nam nec purus vitae odio placerat volutpat. In tempor arcu ut ante gravida pretium. Quisque id convallis orci. Ut sit amet vehicula eros. Nam sit amet dui eleifend, vestibulum ipsum eu, tempor nisl. Quisque aliquet, tellus et vehicula luctus, justo mi convallis leo, ut ornare tortor ex id nulla. Duis nec tempor arcu. Sed odio mi, gravida in sem et, cursus pretium neque.</p>
                <p>Sed dolor turpis, pharetra sit amet tortor nec, auctor porta purus. Duis imperdiet quam egestas eros dictum lobortis. Cras aliquam venenatis neque in convallis. Ut in metus ut nibh tristique semper. Donec posuere elementum egestas. Suspendisse vestibulum semper dolor id elementum. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            </div>
            <div class="teamMemberContent teamInactive" id="teamAudraContent">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras in suscipit lacus. Nam nec purus vitae odio placerat volutpat. In tempor arcu ut ante gravida pretium. Quisque id convallis orci. Ut sit amet vehicula eros. Nam sit amet dui eleifend, vestibulum ipsum eu, tempor nisl. Quisque aliquet, tellus et vehicula luctus, justo mi convallis leo, ut ornare tortor ex id nulla. Duis nec tempor arcu. Sed odio mi, gravida in sem et, cursus pretium neque.</p>
                <p>Sed dolor turpis, pharetra sit amet tortor nec, auctor porta purus. Duis imperdiet quam egestas eros dictum lobortis. Cras aliquam venenatis neque in convallis. Ut in metus ut nibh tristique semper. Donec posuere elementum egestas. Suspendisse vestibulum semper dolor id elementum. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            </div>
        </div>
和一个链接到


非常感谢您的帮助

这是正确的CSS选择器:
.teamMemberContent:not(.teamInactive)
。请试一试。另外,您不应该在addClass方法中使用点:

$('.teamMemberContent:not(.teamInactive)').addClass('teamInactive');

不必找出哪一个不是,您只需使用存在的一个,并使用
.sides()
查找它的同级。然后添加类
.teamInactive

$('#'+teamMemberID).toggleClass('teamInactive').siblings(".teamMemberContent").addClass('teamInactive');

我认为您可以引用“teamMember”类并将“teamInactive”类添加到所有

$('.teamMember').click(
    function(){
        $('.teamMember').addClass('.teamInactive');
        var teamMemberID = $(this).attr('data-teamMember');
        $('#'+teamMemberID).toggleClass('teamInactive');
    });

这应该隐藏每个div,然后只启用您想要的一个

这是正确的,我没有使用兄弟姐妹,我只关注我不想选择的内容。非常感谢。
$('.teamMember').click(
    function(){
        $('.teamMember').addClass('.teamInactive');
        var teamMemberID = $(this).attr('data-teamMember');
        $('#'+teamMemberID).toggleClass('teamInactive');
    });