如何添加一组按钮并在单击下一步和上一步按钮时更改它们

Question

这是我目前的代码，为2组按钮，我们如何添加下一个和前一个功能，他们。

   <div id="chart-section-wrapper" class="container">
    <div id="chart-section">
        <div class="overall-btns col my-3">
        <!-- Buttons -->  
            <!-- set-1 -->           
            <button class="selector-button" name="button-default-1">
                <i class="icon bi bi-droplet-half"></i><span>Albanian</span>
            </button>          
        
            <button class="selector-button" name="button-default-2">
                <i class="icon bi bi-droplet-half"></i><span>Arabic</span>
            </button>          
       
            <button class="selector-button" name="button-default-3">
                <i class="icon bi bi-droplet-half"></i><span>Armenian</span>
            </button>        
      
             <!-- set-2 --> 
            <button class="selector-button" name="button-default-4">
                <i class="icon bi bi-droplet-half"></i><span>Azerbaijani</span>
            </button>
             <button class="selector-button" name="button-default-4">
                <i class="icon bi bi-droplet-half"></i><span>Azerbaijani</span>
            </button>
            <button class="selector-button" name="button-default-4">
                <i class="icon bi bi-droplet-half"></i><span>Azerbaijani</span>
            </button>
        
          <!-- Next-btn -->      
        <div class="next-button-parent text-right mb-3 col-3">
            <button class="next-button" id="next-button">Next </button>
        </div>
        <!-- -btn -->
         <div class="next-button-parent text-right mb-3 col-3">
            <button class="next-button" id="next-button">Prev </button>
        </div>
    </div>
</div>

如果单击-2\f25 next -2(下一步)按钮，则会出现-2\f25 set-2 (设置)按钮；单击-2\f25 previous -2(上一步)按钮时，会出现-1\f25 set-1 (设置)按钮。

Answer 1

这可能不是最干净的解决方案，但它可能会让您很好地了解如何解决它：https://codepen.io/chri_joh/pen/wvgXQgx

var current_position = 1;
var max_blocks = 2;

function show_button_set(direction){
  if(direction === '+'){
    current_position += 1;
    if(current_position > max_blocks) current_position = 1;
  } else {
    current_position -= 1;
    if(current_position < 1) current_position = max_blocks;
  }
  
  document.getElementById('buttonset1').style.display = 'none';
  document.getElementById('buttonset2').style.display = 'none';
  document.getElementById('buttonset'+current_position).style.display = 'block';
}

在这个解决方案中，我基本上包装了两个按钮块，还构建了可以轻松地使用更多块进行扩展的按钮块

Answer 2

为了在单击“下一步”按钮时显示设置1，在单击“上一步”按钮时显示设置2，您可以将HTML更改为：

      <!-- Next-btn -->      
    <div class="next-button-parent text-right mb-3 col-3">
        <button onclick="show_button_set('1')" class="next-button" id="next-        button">Next </button>
    </div>
    <!-- -btn -->
     <div class="next-button-parent text-right mb-3 col-3">
        <button onclick="show_button_set('2')" class="next-button" id="next-button">Prev </button>
    </div>

您可以使用如下所示的脚本：

function show_button_set(set){
  document.getElementById('buttonset1').style.display = set==1? 'block':'none';
  document.getElementById('buttonset2').style.display = set==2? 'block':'none';
}