Блог

У меня есть многоступенчатая форма, в которую я хочу включить индикатор выполнения.

Пока у меня есть следующее решение, которое работает при первом нажатии, но после этого оно не работает.

Javascript:

 $(document).ready(function(){
  var a = document.getElementsByClassName("progress-15");
  var b = document.getElementsByClassName("progress-30");   
  var c = document.getElementsByClassName("progress-50");
  var d = document.getElementsByClassName("progress-70");
  var e = document.getElementsByClassName("progress-85");
  var f = document.getElementsByClassName("progress-100");

  window.addEventListener('click', function() {
    if($("a").is(":visible")) {
      document.getElementsByClassName("progress-bar")[0].style.width = "15%";
    }   
  })
});
 

Я хочу добавить классы типа «.progress-15» к шагам в форме.

До сих пор он работает для progress-15, но не загружается для progress-30.

HTML:

 <!-- /Immobilienart > Grundstück ============================== -->
<div class="branch" id="Grundstück">
  <div class="step" data-state="grundflaeche">                                
    <div class="question_title progress-15">
      <p>Um <strong>was für ein Grundstück</strong> handelt es sich?</p>
    </div>
    <div class="row">
      <div class="col-sm-3">
        <div class="item">
          <input id="branch_0_answer_0" name="branch_0_answers[]" type="radio" value="Bauland" class="required">
          <label for="branch_0_answer_0"><img src="img/Bauland.svg" alt=""><strong>Bauland</strong></label>
        </div>
      </div>
      <div class="col-sm-3">
        <div class="item">
          <input id="branch_0_answer_1" type="radio" name="branch_0_answers[]" value="Ackerland" class="required">
          <label for="branch_0_answer_1"><img src="img/Ackerland.svg" alt=""><strong>Ackerland</strong></label>
        </div>
      </div>
      <div class="col-sm-3">
        <div class="item">
          <input id="branch_0_answer_2" name="branch_0_answers[]" type="radio" value="Wald / Grünland" class="required">
          <label for="branch_0_answer_2"><img src="img/Wald.svg" alt=""><strong>Wald / Grünland</strong></label>
        </div>
      </div>
      <div class="col-sm-3">
        <div class="item">
          <input id="branch_0_answer_3" name="branch_0_answers[]" type="radio" value="Sonstiges" class="required">
          <label for="branch_0_answer_3"><img src="img/Sonstiges.svg" alt=""><strong>Sonstiges</strong></label>
        </div>
      </div>
    </div>
    <!-- /row-->
  </div>
  <!-- /step -->
</div>
 

HTML (индикатор выполнения):

 <main>
    <h1 id="hero">So verkaufen Sie Ihre Immobilie zum Top-Preis</h1>
    <div class="container mb-5">
        <div class="progress-rounded progress pmd-progress position-absolute"><div class="progress-bar progress-bar-info" style="width: 0%;"></div></div>
        <!-- Preloader ============================== -->
        <div data-loader="circle-side"></div>
        <div id="wizard_container">
            <form class="immobilienbewertung" name="example-1" id="wrapped" method="POST">
                <input id="website" name="website" type="text" value="">
                <!-- Leave input above for security protection, read docs for details -->
                <div id="middle-wizard" class="h-75 mb-4 pt-2">
                    <!-- Immobilienart ============================== -->
                    <div class="step" data-state="branchtype">
                        <div class="question_title">
                            <p><strong>Welche Immobilie</strong> möchten Sie verkaufen?</p>
                        </div>
                        <div class="row mb-5">
                            <div class="col-md-3">
                                <div class="item" id="start">
                                    <input id="answer_1" type="radio" name="branch_1_group_1" value="Grundstück" class="required">
                                    <label for="answer_1"><img src="img/Grundstueck.svg" alt=""><strong>Grundstück</strong></label>
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="item">
                                    <input id="answer_2" name="branch_1_group_1" type="radio" value="Wohnung" class="required">
                                    <label for="answer_2"><img src="img/Wohnung.svg" alt=""><strong>Wohnung</strong></label>
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="item">
                                    <input id="answer_3" name="branch_1_group_1" type="radio" value="Haus" class="required">
                                    <label for="answer_3"><img src="img/Haus.svg" alt=""><strong>Haus</strong></label>
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="item">
                                    <input id="answer_4" name="branch_1_group_1" type="radio" value="Gewerbe" class="required">
                                    <label for="answer_4"><img src="img/Gewerbeimmobilie.svg" alt=""><strong>Gewerbe</strong></label>
                                </div>
                            </div>
                        </div>
                        <!-- /row-->
 

У вас есть идея, как я мог бы заставить это работать?

Заранее большое спасибо.

Решение:

 $(document).on('click', function(){
    if($(".progress-0").is(":visible")){
    document.getElementsByClassName("progress-bar")[0].style.width = "0%";
  } 
    if($(".progress-10").is(":visible")){
        document.getElementsByClassName("progress-bar")[0].style.width = "10%";
      } 
    if($(".progress-20").is(":visible")){
        document.getElementsByClassName("progress-bar")[0].style.width = "20%";
      } 
    if($(".progress-30").is(":visible")){
        document.getElementsByClassName("progress-bar")[0].style.width = "30%";
      } 
    if($(".progress-40").is(":visible")){
        document.getElementsByClassName("progress-bar")[0].style.width = "40%";
      } 
    if($(".progress-50").is(":visible")){
        document.getElementsByClassName("progress-bar")[0].style.width = "50%";
      } 
    if($(".progress-60").is(":visible")){
        document.getElementsByClassName("progress-bar")[0].style.width = "60%";
      } 
    if($(".progress-70").is(":visible")){
        document.getElementsByClassName("progress-bar")[0].style.width = "70%";
      } 
    if($(".progress-80").is(":visible")){
        document.getElementsByClassName("progress-bar")[0].style.width = "80%";
      } 
    if($(".progress-90").is(":visible")){
        document.getElementsByClassName("progress-bar")[0].style.width = "90%";
      } 
    if($(".progress-100").is(":visible")){
        document.getElementsByClassName("progress-bar")[0].style.width = "100%";
      } 
});