标签：jquery javascript twitter-bootstrap html

好的,我知道JavaScript没有应用于整个组,因为每个按钮都是不同组的一部分,但是文档说这是使用按钮标记对齐的正确方法.这不是问题,除非我需要它们是合理的.

所以我的问题是：我应该如何在所有三个按钮上使用JavaScript作为一个整体？它应该作为一个简单的单选按钮组运行.

单击一个,其他未选中.任何建议都会很棒！

HTML：

<div class="btn-group btn-group-justified" role="group" aria-label="...">
  <div class="btn-group">
    <button type="button" class="btn btn-default">Low Cost/Effeciency</button>
  </div>
  <div class="btn-group">
    <button type="button" class="btn btn-default active">Average</button>
  </div>
  <div class="btn-group">
    <button type="button" class="btn btn-default">High Cost/Effeciency</button>
  </div>
</div>

JavaScript的：

$(function() {
  $('body').on('click', '.btn-group button', function (e) {
    $(this).addClass('active');
    $(this).siblings().removeClass('active');

    //other things I need to do
  })
});

解决方法:

按钮元素不是兄弟元素.

您需要选择父元素的兄弟元素.

Working Example Here

$(document).on('click', '.btn-group button', function (e) {
  $(this).addClass('active').parent().siblings().find('button').removeClass('active');
});

但是,正确的方法是使用属性data-toggle =“buttons”.

这样做,您不需要编写任何自定义JS.有关更多信息,请参阅我的this old answer解释它是如何工作的.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<div class="btn-group btn-group-justified" data-toggle="buttons" role="group" aria-label="...">
    <label class="btn btn-default">
        <input type="radio" name="options" />Low Cost/Effeciency
    </label>
    <label class="btn btn-default">
        <input type="radio" name="options" />Average
    </label>
    <label class="btn btn-default">
        <input type="radio" name="options" />High Cost/Effeciency
    </label>
</div>

标签：jquery,javascript,twitter-bootstrap,html
来源： https://codeday.me/bug/20190702/1356883.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。