如何解决带单击事件的大写和小写
我想在单击时将一个简单的按钮文本大写,然后在单击列表中的另一个按钮时将其小写。我有四个不同的按钮。
这是我在树枝上看到的代码:
<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');
}
});
解决方法
每次单击时,从所有按钮中删除所有大写类-将大写类添加到所单击的按钮中。
下面的插图。
$('.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>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。