时间戳

首页 > 解决方案 > 我们如何添加一组按钮并在单击下一个和上一个按钮时更改它们

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

问题描述

这是我当前的 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>

当单击下一个按钮时，应该出现 set-2 按钮，并且单击上一个按钮时，应该出现 set-1 按钮，我怎样才能做到这一点。

标签： javascriptcssbootstrap-4

解决方案

它可能不是最干净的解决方案，但它可能会让您知道如何解决它：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';
}

在解决方案中，我基本上包裹了两个按钮块，它还内置，您可以使用更多块轻松扩展它

推荐阅读