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应用于所有元素，但用户刚刚点击的元素。我假设有一种简单的方法可以做到这一点，我一直在看谷歌一段时间，但我认为我没有正确地寻找它。谢谢！

Answer 1

一种方法是从当前拥有它的所有元素中删除该类，然后将该类添加到当前元素。要做到这一点，只需使用：

$("btn").click(function(){
    $(".active").removeClass("active");
    $(this).addClass("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>

如果具有相同类的其他人按

3 个答案: