Question

我正在尝试声明一个变量以从btn组中选择一个按钮。我有2个按钮组，但在我的代码中将它们彼此分开时遇到了麻烦。下面的代码适用于单个按钮组，但是，我在同一页面上有两个单独的按钮组，并且此代码只能让我在两个btn组之间选择一个按钮。我希望能够为每个btn-group选择一个按钮（仅显示一个btn-group，另一个类似，但名称/标识不同）。

我是否可以基于btn-group id进行选择？

HTML：

<div name="severitButtons" id="severitButtons" class="btn-group btn-group-justified">
    <!-- start buttons -->
    <!-- Very Negative -->
    <label id="very-low" btn-radio="option.value.toString()" 
      uncheckable="" class="btn btn-default ng-pristine ng-untouched ng-valid">
        Very low
        <div class="accent-border accent-border-very-low"></div>
    </label>
    <!-- Negative -->
    <label id="low" btn-radio="option.value.toString()" 
      uncheckable="" class="btn btn-default ng-pristine ng-untouched ng-valid ng valid-parse">
        Low
        <div class="accent-border accent-border-low"></div>
    </label>
    <!-- Neutral -->
    <label id="moderate" btn-radio="option.value.toString()" uncheckable="" class="btn btn-default ng-pristine ng-untouched ng-valid">
        Medium<div class="accent-border accent-border-medium"></div>
    </label>
    <!-- Positive -->
    <label id="high" btn-radio="option.value.toString()" 
       uncheckable="" class="btn btn-default ng-pristine ng-untouched ng-valid">
        High<div class="accent-border accent-border-high"></div>
    </label>
    <!-- Very Positive -->
    <label id="very-high" btn-radio="option.value.toString()" 
      uncheckable="" class="btn btn-default ng-pristine ng-untouched ng-valid">
        Very high<div class="accent-border accent-border-very-high"></div>
    </label>
    <!-- end buttons -->
</div>

JS：

<script>
    var selector = '.btn-group label';

    $(selector).on('click', function(){
        $(selector).removeClass('active');
        $(this).addClass('active');
    });
</script>

Answer 1

如果两个按钮组的ID不同，则可以使用选择器中的ID进行区分。

<script>
    var selector = '#severitButtons label, #severitButtons2 label';

    $(selector).on('click', function(){
        $(selector).removeClass('active');
        $(this).addClass('active');
    });
</script>

带标签和ID的Javascript变量声明

1 个答案: