我正在开发一个看起来像这样的网站：
因此，可以同时单击同一组下的一个项目（一个组是类型，另一个是度量）。
为了使代码尽可能小，我只需添加类型组的代码。 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应用于所有元素，但是用户刚刚点击的元素。 我假设有一种简单的方法可以做到这一点，我一直在看谷歌一段时间，但我认为我没有正确地寻找它。 谢谢！
I'm developing a site that looks like this:
So, only one of the items under the same group (one group is type and the other is measure) can be clicked at the same time.
To keep the code as small as possible, I'll just add the code for the type group. The html is:
<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>And, I have a function that assign the name from the button press to a text field and keep the button as active.
<script> $('.btn-mark-type').click(function(){ document.getElementById('type').value = this.name; if($(this).hasClass('active')){ $(this).removeClass('active') } else { $(this).addClass('active') } }); </script>Now, what I want to do, it's apply .removeClass to all the elements but the one that the user just clicked. I assume that there will be a easy way to do it, I've been looking at google for a while, but I assume that I'm not looking for it properly. Thanks!
最满意答案
您的代码存在多个问题。
如果您的菜单项具有多个具有不同类名的菜单，则它将无法工作，因为您只查找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>There are multiple issues with your code.
If you have multiple menus with different classnames for their menu items, it won't work since you are only looking for btn-mark-type and this class doesn't exists on your markup.
If you have multiple menus, then clicking one item will deselect options from other menus since it removes active class from all menu items.
change it to something like
<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>更多推荐
发布评论