javascript - 创建单击时在 Twitter Bootstrap 按钮组中处于事件状态的复选框按钮的哈希值

Question

我有多个 Twitter Bootstrap checkbox groups 组。我想在单击任一复选框按钮时创建所有事件按钮(即 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，当我单击“Right”时，我会在控制台中看到类似 [1,undefined] 的内容。

最终，我想获得一个像 { {'hids', [ 1, 3 ]}, {'vids', [ 2, 3, ]} } } 这样的哈希值来发布p>

我尝试了 jsfiddle但我认为我没有正确加载 Bootstrap 内容，因为我没有看到按钮处于事件状态。

Answer 1

这是因为您的数据属性中存在拼写错误( fiddle )，并且您选择了所有 .active 类，而不是属于水平的类 div 并且由于它们没有 data-hposition 属性，因此返回 未定义，请尝试以下操作:

$('#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);    
})

DEMO

<小时/>请注意，它们是 按钮标签，而不是单选按钮。