Question

您好，非常感谢您的帮助！

我对编码很新，我花了很多时间来提出这段代码。幸运的是它工作:-)它的功能是将多步骤部分的导航元素设置为活动....我知道这是非常低效的编码，但我还没有技能，以使其更有效。你能救我吗？非常感谢你，谢谢！

$('#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

你可以给他们所有同一个班级。例如class="step"。（忘记身份证）

然后你可以添加一个适用于所有这些的点击功能

$(".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

Class而不是id，以及四行代码。

$('.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>

美化效率低下的代码

2 个答案: