如何在Bootstrap的btn-group中预切换按钮? [英] How can I pre-toggle a button in Bootstrap's btn-group?

问题描述

如何部署单选按钮组并使按钮之一预先切换?

How can I deploy the Radio Button group and make one of the buttons pre-toggled?

我有一个单选按钮组，其中包含星期几的值.这个:

I have a radio-buttons group with days of the weeks values. This one:

<div class="btn-group" data-toggle="buttons-radio">
  <button class="btn" id="test0">Mon</button>
  <button class="btn" id="test1">Tue</button>
  <button class="btn" id="test2">Wed</button>
  <button class="btn" id="test3">Thu</button>
  <button class="btn" id="test4">Fri</button>
  <button class="btn" id="test5">Sat</button>
  <button class="btn" id="test6">Sun</button>
</div>

我需要获取当前日期值(使用var currentDay = new Date().getDay())并toggle(激活)组中的相应按钮.

What I need is to fetch the current day value (using var currentDay = new Date().getDay()) and toggle (activate) the corresponding button in the group.

我正尝试用下一个代码切换它(仅出于测试目的):

And I'm trying to toggle it with the next code (just in testing purposes):

$("#test0").button('toggle')

这不起作用.

推荐答案

您可以利用bootstraps .btn.active类并将其添加到希望首先切换的按钮中，并且可以使用jQuerys 演示.

You can take advantage of the bootstraps .btn.active class and just add it to the button you wish toggled first and you can use jQuerys toggleClass to untoggle the buttons. Demo.

刚刚注意到twitter有一个按钮脚本，您可以调用该按钮来实现此效果，这是带有结果的固定 demo 你在期待.

Just noticed that twitter has a button script that you can call for this effect, here is a fixed demo with the results you were expecting.

在查看了您的评论中的实际需求之后，我用所需的结果更新了小提琴.

After looking at what you actually wanted from the comment i updated my fiddle with the results you're looking for.

我添加了一个函数，该函数使用javascripts getDay方法从数组中提取当天的日期，并通过定位按钮的ID来切换按钮组上的相应日期:

I added a function that pulls the current day using javascripts getDay method from an array and toggles the corresponding day on the button group by targetting the id of the button: demo

相关代码:

JS

function today() {
    var arr = ["0", "1", "2", "3", "4", "5", "6"]; //first day of the week is sunday and its index is 0
    var currentDay = new Date().getDay();

    return (arr[currentDay]);
}

var day = '[id="test' + today() +'"]'; // we take the current day from the array and add the beginning of the class name and save it in a variable

$(day).button('toggle');

这篇关于如何在Bootstrap的btn-group中预切换按钮?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！