1

我有多组Twitter Bootstrap 复选框组。当单击任何一个复选框按钮时，我想创建所有活动（即，Bootsrtap 添加“活动”类）按钮的哈希。假设点击几下后 html 是这样的：

<div id="horizontal" class="btn-group" data-toggle="buttons-checkbox">
  <button class="btn active" data-hposition="1">Left</button>
  <button class="btn" data-hposition="2">Middle</button>
  <button class="btn active"data-hposition="3">Right</button>
</div>
<div id="vertical" class="btn-group" data-toggle="buttons-checkbox">
  <button class="btn" data-vposition="1">Top</button>
  <button class="btn active" data-vposition="2">Center</button>
  <button class="btn active" data-vposition="3">Bottom</button>
</div>

我一开始很简单，只有一个 div，但我没有得到正确的结果：

<script>
  $('#horizonatal').click( function(){
      var paramsHash = {};
      var hids = [];
    $('.active').each( function() {
      paramsHash.hids.push($(this).data('hposition'));
  })
      console.log(paramsHash.hids);    
})
</script>

使用上面的 html，当我单击“右”时，我会[1,undefined]在控制台中看到类似的东西。

最终，我想得到一个散列到 Post like{ {'hids', [ 1, 3 ]}, {'vids', [ 2, 3, ]} }

我尝试了一个jsfiddle，但我认为我没有正确加载 Bootstrap 的东西，因为我没有看到按钮处于活动状态。

4

1 回答 1

0

那是因为您的数据属性中有拼写错误（在小提琴上），并且您选择了所有.active不属于水平div 的类，并且由于它们没有data-hposition属性，因此它返回undefined，请尝试以下操作：

$('#horizontal').click( function(){
      var paramsHash = {
              hids: [],
            //vidz: []
          }
    $('.active', this).each( function() {
      paramsHash.hids.push($(this).data('hposition'));
   // paramsHash.vidz.push($(this).data('classroom'));
    })
      console.log(paramsHash);    
})

演示

请注意，它们是按钮标签而不是单选按钮。

于 2012-07-28T15:54:14.580 回答