手写一个步骤slider，实现步骤选择

今天给大家写个步骤slider功能，html部分可以不看，主要看js代码部分。具体是什么样子可以看下面的图片。

功能点1：选择好option,进入下一步

功能点2：没有选择option,不能点击下面步骤点进入下一步

功能点3：进入下一步后，可以通过下面的步骤点返回到对应的一步

功能点4：做了缩屏实时监听，确保模块一直在正确的位置

具体的可以看下面代码：

<div class="index-find-all bottom-padding">
  <div class="index-find-box">
    <div class="index-find-steps">
      <div class="find-steps-slider">
        <div class="find-steps-inner">
          <div class="find-steps-box find-step1">
            <div class="find-step1-inner">
              {%- for block in section.blocks -%}
                {%- case block.type -%}
                  {%- when 'pearls' -%}
                    <div class="find-step1-header">
                      <h2 class="find-header-title index-title-h1">{{ block.settings.header }}</h2>
                      <div class="find-header-text">{{ block.settings.text }}</div>
                    </div>
                    <div class="find-type-options">
                      {% for j in (1..6) %}
                        {%- capture pearl -%}pearl{{ j }}{%- endcapture -%}
                        <div class="find-type-option" data-value="{{ block.settings[pearl] }}">{{ block.settings[pearl] }}</div>
                      {% endfor %}
                    </div>
                {%-endcase-%}
              {%- endfor -%}
            </div>
          </div>
          <div class="find-steps-box find-step2">
            <div class="find-step2-inner">
              {%- for block in section.blocks -%}
                {%- case block.type -%}
                  {%- when 'colors' -%}
                    <div class="find-step2-header">
                      <div class="find-header-title index-title-h1">{{ block.settings.header }}</div>
                    </div>
                    <div class="find-color-options">
                      {% for j in (1..6) %}
                        {%- capture images -%}image{{ j }}{%- endcapture -%}
                        {%- capture colors -%}color{{ j }}{%- endcapture -%}
                        <div class="find-color-option" data-value="{{ block.settings[colors] }}">
                          <img src="{{ block.settings[images] | img_url: '130x' }}" alt="">
                          <span>{{ block.settings[colors] }}</span>
                        </div>
                      {% endfor %}
                    </div>
                {%-endcase-%}
              {%- endfor -%}
            </div>
          </div>
          <div class="find-steps-box find-step3">
            <div class="find-step3-inner">
              {%- for block in section.blocks -%}
                {%- case block.type -%}
                  {%- when 'budget' -%}
                    <div class="find-step3-header">
                      <div class="find-header-title index-title-h1">{{ block.settings.header }}</div>
                    </div>
                    <div class="find-price-range">
                      <label>
                        Min
                        <input type="number" inputmode="numeric" id="value_min" class="value value_min" value="$" placeholder="$">
                      </label>
                      <span class="price-to">to</span>
                      <label>
                        Max
                        <input type="number" inputmode="numeric" id="value_max" class="value value_max" value="$" placeholder="$">
                      </label>
                    </div>
                    <div class="find-result">{{ block.settings.btn_text }}</div>
                {%-endcase-%}
              {%- endfor -%}
            </div>
          </div>
        </div>
      </div>
      <div class="index-find-points">
        <div class="index-find-point active" data-step="1"></div>
        <div class="index-find-point" data-step="2"></div>
        <div class="index-find-point" data-step="3"></div>
      </div>
    </div>
    <div></div>
  </div>         
</div>


<script>
$(document).ready(function () {
  var typeSelected = false; // 标记是否选中类型
  var colorSelected = false; // 标记是否选中颜色
  var type = ''  // 选择的类型
  var color = ''  // 选择的颜色
  var minprice = ''  // 选择的最小价格
  var maxprice = ''  // 选择的最大价格

  // 点击类型
  $('.find-type-option').on('click', function () {
    // 更新类型的状态
    $('.find-type-option').removeClass('active');
    $(this).addClass('active');
    typeSelected = true; // 标记已选中类型

    // 激活步骤点
    $('.index-find-point').eq(1).addClass('active').siblings().removeClass('active');

    // 赋值选择类型
    type = $(this).data('value')
    updateSlider();
  });

  // 点击颜色
  $('.find-color-option').on('click', function () {
    // 更新颜色的状态
    $('.find-color-option').removeClass('active');
    $(this).addClass('active');
    colorSelected = true; // 标记已选中颜色

    // 激活步骤点
    $('.index-find-point').eq(2).addClass('active').siblings().removeClass('active');

    // 赋值选择颜色
    color = $(this).data('value')
    updateSlider();
  });

  // 点击步骤点
  $('.index-find-point').on('click', function () {
    var stepClicked = $(this).data('step');

    if ((stepClicked === 1 && typeSelected) || (stepClicked === 2 && colorSelected)) {
      // 只有在满足条件的情况下才激活步骤点的点击事件
      // 更新步骤点的状态
      $('.index-find-point').removeClass('active');
      $(this).addClass('active');

      updateSlider();
    }
  });


  // 定义一个函数来处理滑块位置更新
  function updateSlider() {
    // 获取 find-steps-box 的新宽度
    var boxWidth = $('.find-steps-box').width();

    // 获取当前活动步骤点的 data-step 属性值
    var activeStep = $('.index-find-point.active').data('step');

    // 计算要移动的距离
    var translateX = -(activeStep - 1) * boxWidth;

    // 将 translateX 应用到 find-steps-slider 上
    $('.find-steps-inner').css('transform', 'translate(' + translateX + 'px)');
  }

  // 初次加载页面时更新 slider
  updateSlider();

  // 监听窗口大小改变事件
  $(window).on('resize', function () {
    // 重新调用函数以更新 boxWidth
    updateSlider();
  });
});

</script>