Question

我有这个jQuery：

$('.infoExpand p').hide();
$('.infoData').click(function(){
    $('.infoData').removeClass('infoDataHov');
    $(this).addClass('infoDataHov');
    var id = this.id;
    id = id.replace("tab", "info");
    var clicked = $('.infoExpand #' + id);
    if (clicked.is(':visible')){
       clicked.slideToggle();
    }else{
       $('.infoExpand p:visible').slideToggle();
         clicked.slideToggle();
    }

});

随着这个标记：

<div class="infographic">
        <p>What am I made of...</p>
        <span id="tabPhp" class="infoData">PHP</span>
        <span id="tabJquery" class="infoData">jQuery</span>
        <span id="tabWordpress" class="infoData">WordPress</span>
        <span id="tabCss3" class="infoData">CSS3</span>
        <span id="tabMysql" class="infoData">MySQL</span>
        <div class="infoExpand">
            <p id="infoPhp">PHP</p>
            <p id="infoJquery">jQuery</p>
            <p id="infoWordpress">Wordpress</p>
            <p id="infoCss3">CSS3</p>
            <p id="infoMysql">MySQL</p>
        </div>
    </div>

我遇到的问题是，当用户点击已经选中的相同标签（向上滑动P元素）时，标签仍然应用了'infoDataHov'类？

如果没有什么是slideDown，我如何从所有.infoData中删除类？

Answer 1

您已经在代码中提前了解了$('.infoData').removeClass('infoDataHov');行。它做你想要的:)在这种情况下你知道要从哪个元素中删除类，所以你可以使用$(this).removeClass('infoDataHov');：

$('.infoExpand p').hide();
$('.infoData').click(function(){
    $('.infoData').removeClass('infoDataHov');
    $(this).addClass('infoDataHov');
    var id = this.id;
    id = id.replace("tab", "info");
    var clicked = $('.infoExpand #' + id);
    if (clicked.is(':visible')){
       $(this).removeClass('infoDataHov');
       clicked.slideToggle();
    }else{
       $('.infoExpand p:visible').slideToggle();
         clicked.slideToggle();
    }

});

removeClass如果没有什么是slideDown

1 个答案: