带有点击事件的小写和大写答案

【问题标题】：Lower and uppercase with click event带有点击事件的小写和大写
【发布时间】：2020-08-21 07:33:13
【问题描述】：

我想在单击时将简单的按钮文本设为大写，然后在单击列表中的另一个按钮时将其设为小写。我有四个不同的按钮。

这是我的视图树枝上的代码：

        <div class="btn-group btn-group-lg" role="group" aria-label="...">
            {% for s in secteur %}
                <button id="linkSecteur_{{ s.SecteurId }}" class="text-lg-left btn btn-link z-btn- 
                 secteur" data-id="{{ s.SecteurId }}">{{ s.LibLong }}</button>
            {% endfor  %}
        </div>

为了解决这个问题，这是我在 jquery 中的代码：

   $('.z-btn-secteur').on('click', function() {
        if ($(this).data('change', 'true')) {
            //console.log('hello')
            $(this).addClass('text-uppercase');
        } else {
            $(this).addClass('text-lowercase');
        }
    });

【问题讨论】：

标签： jquery symfony button click

【解决方案1】：

每次单击时，从所有按钮中删除所有大写类 - 将大写类添加到单击的按钮。

下图。

$('.z-btn-secteur').on('click', function() {
        $('.z-btn-secteur').removeClass('text-uppercase');
        $(this).addClass('text-uppercase');
    });

.text-uppercase{
  text-transform:uppercase;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="btn-group btn-group-lg" role="group" aria-label="...">
            
                <button id="linkSecteur_1" class="text-lg-left btn btn-link z-btn-secteur" data-id="whatever1">text here</button>
                 <button id="linkSecteur_2" class="text-lg-left btn btn-link z-btn-secteur" data-id="whatever2">text here2</button>
                 <button id="linkSecteur_3" class="text-lg-left btn btn-link z-btn-secteur" data-id="whatever3">text here3</button>
            
        </div>

【讨论】：

您好 Stender，非常感谢您的帮助，它非常适合我的需求。