Verschmelzen ineffizient Code

Question

Hallo und vielen Dank für Ihre Hilfe im Voraus!

Ich bin sehr neu in der Codierung und ich habe ziemlich viel Zeit damit verbracht, diesen Code zu entwickeln. Zum Glück klappt es :-) Seine Funktion ist es, Navigationselemente eines mehrstufigen Abschnitts aktiv zu setzen .... Ich weiß, dass das sehr ineffizient codiert ist, aber ich habe noch nicht die Fähigkeiten, es effizienter zu machen. Könntest du mir helfen? Vielen Dank, vielen Dank!

$('#Step1').click(function(){ 
     $('#Step1').addClass('Step-item-active'); 
     $('#Step2').removeClass('Step-item-active'); 
     $('#Step3').removeClass('Step-item-active'); 
     $('#Step4').removeClass('Step-item-active'); 

    }); 
    $('#Step2').click(function(){ 
     $('#Step2').addClass('Step-item-active'); 
     $('#Step3').removeClass('Step-item-active'); 
     $('#Step4').removeClass('Step-item-active'); 
     $('#Step1').removeClass('Step-item-active'); 

    }); 
    $('#Step3').click(function(){ 
     $('#Step3').addClass('Step-item-active'); 
     $('#Step4').removeClass('Step-item-active'); 
     $('#Step1').removeClass('Step-item-active'); 
     $('#Step2').removeClass('Step-item-active'); 

    }); 
    $('#Step4').click(function(){ 
     $('#Step4').addClass('Step-item-active'); 
     $('#Step1').removeClass('Step-item-active'); 
     $('#Step2').removeClass('Step-item-active'); 
     $('#Step3').removeClass('Step-item-active'); 

    }); 

Answer 1

Sie könnten ihnen alle die gleiche Klasse geben. Zum Beispiel class="step". (Vergessen Sie die IDs)

Dann können Sie eine Klick-Funktion hinzufügen, die für alle von ihnen arbeitet

$(".step").click(function(){ 
    // remove the class from all of them 
    $(".step").removeClass("Step-item-active") 
    // add the class to the clicked element 
    $(this).addClass("Step-item-active") 
}); 

Answer 2

Klasse statt IDs und vier Zeilen Code.

$('.Step').click(function() { 
 
    $('.Step-item-active').removeClass('Step-item-active'); 
 
    $(this).addClass('Step-item-active'); 
 
});

div { 
 
    width: 50px; 
 
    height: 50px; 
 
    background-color: blue; 
 
} 
 

 
.Step-item-active { 
 
    background-color: red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<div class="Step"></div> 
 
<div class="Step"></div> 
 
<div class="Step"></div> 
 
<div class="Step"></div>