4

我正在尝试data-toggle="buttons-radio"在我的网站中使用 Twitter Bootstrap 按钮组。引导标记如下。

<div class="btn-group program-status" data-toggle="buttons-radio">
    <button class="btn">All</button>
    <button class="btn">Active</button>
    <button class="btn">Planning</button>
    <button class="btn">End of Life</button>
    <button class="btn">Cancelled</button>
</div>

我需要根据按下的按钮重定向到带有查询的同一页面。我尝试使用以下 jQuery 代码来实现这一点。

<script>
    var sParamStr = '';

    function addToParamStr(str) {
        sParamStr += str;
    }

    function redirectToUpdatedLocation() { 

        $('.program-status > .btn.active').each(function () {
            addToParamStr( '?status=' + $(this).text());
        });

        console.log(sParamStr);
        window.location.href = "program" + sParamStr;
    }

    $document.ready(function () {
        $('.program-status > .btn').on('click', function (e) {
            redirectToUpdatedLocation();
        });
    });
</script>

但是浏览器总是重定向到 {site}/program 没有查询字符串。通过注释掉window.location.href = "program" + sParamStr;一行，我设法观察到第二次点击，并sParamStr正确附加。

看来，我的代码之前尝试读取按下按钮的文本，.button('toggle')方法表单 bootstrap.js 完成。当我按如下更改功能时，代码按预期工作。

$document.ready(function () {
    $( '.program-status > .btn').on('click', function (e) {
        $(this).addClass('active');
        redirectToUpdatedLocation();
    });
});

虽然这种方法现在对我有用，但我想知道实现这一目标的正确方法。即如何在之前的点击绑定完成后执行我的代码？

更新：

我在 Twitter Bootstrap 论坛中找到了这个链接。似乎这是一个已知问题。 https://github.com/twitter/bootstrap/issues/2380

4

2 回答 2

1

我不确定 Bootstrap.toggle到底在做什么，但它似乎做了某种与active类的设置一起完成的动画。您可以尝试将您的代码加入队列：

$( '.program-status > .btn').on('click', function (e){
    $(this).queue(function (next) {
        redirectToUpdatedLocation();
        next();
    });
});

例如，在切换 div 时单击它：http: //jsfiddle.net/9HwYy/

对我来说，更新每一个 href而不是仅仅更新你点击的那个似乎也有点傻，因为无论如何你都在改变窗口位置。

于 2013-02-26T00:40:18.570 回答
0

尝试

$('.program-status > .btn.active').each(function(i,v){
  v = $(v);
  addToParamStr( '?status=' + v.text());
});

因为我不确定“这个”是否适用于您的情况。

于 2013-02-26T00:36:16.777 回答