按钮上单击显示另一个按钮组

Button on click shows another button group?

本文关键字：按钮 另一个 单击 显示      更新时间：2023-09-26

我想创建显示另一组按钮的按钮事件。下面是我到目前为止的代码:

如果有人从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>

已更新

看一下Working fiddle中的例子。

  1. 将step-1添加到锚(1 2 3 ....)组中，以便我们可以使用选择器$('.step-1 a')影响对它们的单击事件。

  2. 通过单击添加属性data-id包含相关组的id。

  3. 将step-2添加到包含按钮组的所有div中，以便我们可以在使用$('.step-2').hide();显示单击的按钮之前隐藏它们。

  4. 将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>

相关文章：