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, ]} }

一样发帖

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

Answer 1

那是因为您的数据属性中存在拼写错误（ on the fiddle ）并且您还选择了所有.active类，而不是那些属于水平的类div并且因为它们没有 data-hposition 属性，它返回 undefinded ，请尝试以下操作：

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

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

创建一个复选框按钮的哈希值，该按钮在点击时在Twitter Bootstrap按钮组中处于活动状态

1 个答案: