Question

我想创建按钮事件，显示另一组按钮。到目前为止，这是我的代码：

如果有人从1 - 5中选择一个按钮并按此按钮。这应该是另一个组合按钮。

 <div class="col-md-12" style="margin-bottom: 10px;">
    <p class="bg-danger">Step 1: Choose number</p>
    <div class="btn-group btn-group-justified">
        <a href="#" class="btn btn-primary">1</a>
        <a href="#" class="btn btn-primary">2</a>
        <a href="#" class="btn btn-primary">3</a>
        <a href="#" class="btn btn-primary">4</a>
        <a href="#" class="btn btn-primary">5</a>
    </div>

例如：如果按下按钮2，则应显示这组按钮：

<p class="bg-danger">Step 2: Output</p>
<div class="col-md-12" style="margin-bottom: 10px;">
<div class="btn-group btn-group-justified">
    <a href="#" class="btn btn-primary">11</a>
    <a href="#" class="btn btn-primary">22</a>
    <a href="#" class="btn btn-primary">33</a>
    <a href="#" class="btn btn-primary">44</a>
    <a href="#" class="btn btn-primary">55</a>
    <a href="#" class="btn btn-primary">66</a>
    <a href="#" class="btn btn-primary">77</a>
    <a href="#" class="btn btn-primary">88</a>
    <a href="#" class="btn btn-primary">99</a>
    <a href="#" class="btn btn-primary">110</a>
    <a href="#" class="btn btn-primary">220</a>
</div>

Answer 1

<强>已更新

查看 Working fiddle 中的示例。

将step-1添加到锚点组（1 2 3 ....），以便我们可以使用选择器$('.step-1 a')影响点击事件。
通过点击添加attribut data-id包含相关群组的id。
将step-2添加到包含按钮组的所有div中，以便我们可以在使用$('.step-2').hide();显示所点击的按钮之前隐藏它们。
将ids添加到包含按钮组的所有div，然后我们要为step-1中的点击按钮选择特定的组按钮。

JS：

$('.step-1 a').click(function(){
    $('.step-2').hide(); //Hide others groups
    $('#'+$(this).data('id')).show(); //Show clicked group
});

HTML：

<div class="col-md-12" style="margin-bottom: 10px;">
    <p class="bg-danger">Step 1: Choose number</p>
    <div class="btn-group btn-group-justified step-1">
        <a href="#" data-id='group-1' class="btn btn-primary">1-2-3...</a>
        <a href="#" data-id='group-2' class="btn btn-primary">2</a>
        <a href="#" data-id='group-3' class="btn btn-primary">3</a>
        <a href="#" data-id='group-4' class="btn btn-primary">4</a>
        <a href="#" data-id='group-5' class="btn btn-primary">5</a>
    </div>
</div>


<div id="group-1"  class="col-md-12 step-2" style="margin-bottom: 10px;display:none">
    <div class="btn-group btn-group-justified">
        <a href="#" class="btn btn-primary">1</a>
        <a href="#" class="btn btn-primary">2</a>
        <a href="#" class="btn btn-primary">3</a>
        <a href="#" class="btn btn-primary">4</a>
        <a href="#" class="btn btn-primary">5</a>
        <a href="#" class="btn btn-primary">6</a>
        <a href="#" class="btn btn-primary">7</a>
        <a href="#" class="btn btn-primary">8</a>
        <a href="#" class="btn btn-primary">9</a>
        <a href="#" class="btn btn-primary">10</a>
    </div>
</div>

<div id="group-2" class="col-md-12 step-2" style="margin-bottom: 10px;display:none">
    <div class="btn-group btn-group-justified">
        <a href="#" class="btn btn-primary">11</a>
        <a href="#" class="btn btn-primary">22</a>
        <a href="#" class="btn btn-primary">33</a>
        <a href="#" class="btn btn-primary">44</a>
        <a href="#" class="btn btn-primary">55</a>
        <a href="#" class="btn btn-primary">66</a>
        <a href="#" class="btn btn-primary">77</a>
        <a href="#" class="btn btn-primary">88</a>
        <a href="#" class="btn btn-primary">99</a>
        <a href="#" class="btn btn-primary">110</a>
        <a href="#" class="btn btn-primary">220</a>
    </div>
</div>

希望得到这个帮助。

点击按钮显示另一个按钮组？

1 个答案: