Павел Ромадов's questions

const navigateToFormStep = (stepNumber) => {
  document.querySelectorAll(".form-step").forEach((formStepElement) => {
      formStepElement.classList.add("d-none");
  });
  document.querySelectorAll(".form-stepper-list").forEach((formStepHeader) => {
      formStepHeader.classList.add("form-stepper-unfinished");
      formStepHeader.classList.remove("form-stepper-active", "form-stepper-completed");
  });
  document.querySelector("#step-" + stepNumber).classList.remove("d-none");
};

document.querySelectorAll(".btn-navigate-form-step").forEach((formNavigationBtn) => {
  formNavigationBtn.addEventListener("click", () => {
      const stepNumber = parseInt(formNavigationBtn.getAttribute("step_number"));
      navigateToFormStep(stepNumber);
  });
});

我尝试自己重写它，我认为我犯了很多错误。虽然控制台不发誓。

 function navigateToFormStep($stepNumber) {
$('.form-step').each(($formStepElement), function(){
  $formStepElement.addClass('d-none')
})

$('.form-stepper-list').each(($formStepHeader), function(){
  $formStepHeader.addClass('form-stepper-unfinished')
  $formStepHeader.removeClass('form-stepper-unfinished')
  $formStepHeader.removeClass('form-stepper-completed')
})
$('#step-' + $stepNumber).removeClass('d-none')

}

 (function($){
$('.btn-navigate-form-step').each(($formNavigationBtn), function() {
  $formNavigationBtn.on('click', function(){
   var stepNumber = parseInt($formNavigationBtn.attr('step_number'))
    navigateToFormStep($stepNumber)
 })
})

})

而且代码现在不起作用。也许犯了一些严重的错误。我试图编辑每一行js代码并将其翻译成jquery。

我正在使用 Bootstrap 4.6 和 popover 组件。

有必要添加一个十字，按下时也应将其关闭。另外，我尝试通过title="+"来实现它，但是如何使它使十字形相同，如图所示，即可以为其规定必要的属性。

我欢迎大家！请告诉我如何自定义此进度条。我正在使用 swiper.js。使其在活动幻灯片上工作。现在，有了这个初始化，就出现了一条大实线。

 const bigSlider = new Swiper('.big-slider',{
        spaceBetween: 10,
        autoplay: {
            delay: 4000
        },
        loop: true,
        pagination: {
            el: '.swiper-pagination',
            type: 'progressbar',
        },
        
    })