如果按下其他具有相同类的元素，则从元素中删除类

Question

我正在开发一个看起来像这样的网站：

因此，只能同时单击同一组下的一项（一组是类型，另一组是度量）。

为了使代码尽可能的小，我只添加类型组的代码。 的HTML是：

<div id="selector" class="btn-group">
    <h2>Measure</h2>
    <button type="button" name="Energy" class="btn-mark-measure">Energy</button>
    <button type="button" name="Demand" class="btn-mark-measure">Demand</button>
    <button type="button" name="Consume" class="btn-mark-measure">Consume</button>
    <button type="button" name="PF" class="btn-mark-measure">PF</button>
    <button type="button" name="Capacitive" class="btn-mark-measure">Capacitive</button>
    <button type="button" name="Inductive" class="btn-mark-measure">Inductive</button>
    <button type="button" name="PUE" class="btn-mark-measure">PUE</button>
</div>

而且，我有一个功能，可以将按钮按下时的名称分配给文本字段，并使按钮保持活动状态。

<script>
    $('.btn-mark-type').click(function(){
        document.getElementById('type').value = this.name;
        if($(this).hasClass('active')){
            $(this).removeClass('active')
        } else {
            $(this).addClass('active')
        }
    });
</script>

现在，我想做的就是将.removeClass应用于除用户刚刚单击的元素之外的所有元素。 我认为将有一种简单的方法来实现它，我一直在看google一段时间，但是我认为我没有在正确地寻找它。 谢谢！

Answer 1

一种方法是从当前拥有该类的所有元素中删除该类，然后将其添加到当前元素中。 为此，只需使用类似以下内容的方法：

$("btn").click(function(){
    $(".active").removeClass("active");
    $(this).addClass("active");
});

这将从具有active类的每个元素中删除active类（您可以更具体地说明这些元素是否还具有其他类名，只需将$(".active")更新$(".active") $(".desiredClass") ）。 然后将active类添加到当前单击的按钮。

如果您为我提供了jsFiddle，我可能会帮助您实现所需的目标。

希望这可以帮助！

Answer 2

你可以试试这个：

<script>
    $('.btn-mark-type').click(function(){
        document.getElementById('type').value = this.name;
        if($(this).hasClass('active')){
             $('.btn-mark-measure.active').removeClass('active');
        } else {
             $('.btn-mark-measure.active').removeClass('active');
             $(this).addClass('active');
        }

        }
    });
</script>

它将删除所有按钮中的所有活动类，然后将其添加到当前按钮中。

注意：答案已更新，因此可以在单击的元素上切换类

Answer 3

您的代码有多个问题。

• 如果您有多个菜单，这些菜单的菜单项使用不同的类名，则该菜单将不起作用，因为您仅在查找btn-mark-type并且该类在您的标记中不存在。

• 如果您有多个菜单，则单击一项将取消选择其他菜单中的选项，因为这会从所有菜单项中删除active班级。

将其更改为

<script>
    bindToType ( "measure" );
    bindToType ( "type" );
    function bindToType( type )
    {
     $('.btn-mark-' + type ).click(function(){ //to ensure that different types have different bindings
         //remove only from  '.btn-mark-' + type, not from all .actives
         $('.btn-mark-' + type + '.active' ).removeClass( "active" );
         $( this ).addClass( 'active' );
     });
    }
</script>