Сложное Условный

Question

У меня есть набор инструкций в верхней части моей страницы:

<div class="instructions"> 
     <div id="step1" class="step"><span class="step_active">1</span><span class="step_title_active">General Info</span></div> 
     <div id="step2" class="step"><span class="step_next">2</span><span class="step_title">Select Contact</span></div> 
     <div id="step3" class="step"><span class="step_next">3</span><span class="step_title">Log Details</span></div> 
    </div> 

У меня есть форма, которая показывает себя условия. Первым условием является то, что оба окна выбора должны иметь выбранные опции перед тем, как появится следующая часть.

<script> 
$(document).ajaxSuccess(function() { 
    $("#test").hide(); 
    $("#comType, #comDirection").bind('change', function() { 
     // show the button if they both have a value 
     if ($("#comType").val().length > 1 && $("#comDirection").val().length > 1) { 
      $("#test").fadeIn(); 
     } 
    }); 
}); 
</script> 

Как я могу изменить классы # step1 # step2 так, что, когда вышеуказанные условия выполнены, они выглядят как:

<div id="step1" class="step"><span class="step_complete">1</span><span class="step_title">General Info</span></div> 
    <div id="step2" class="step"><span class="step_active">2</span><span class="step_title_active">Select Contact</span></div> 

Мысли?

Answer 1

Вы можете использовать addClass & removeClass property of jQuery.

Попробуйте это:

if ($("#comType").val().length > 1 && $("#comDirection").val().length > 1) { 
    $("#test").fadeIn(); 
    $("#step1").children("span").removeClass("step_active").addClass("step_complete"); 
    $("#step2").children("span").removeClass("step_next").addClass("step_active"); 
    $("#step1").children("span").next("span").removeClass("step_title_active").addClass("step_title"); 
    $("#step2").children("span").next("span").removeClass("step_title").addClass("step_title_active"); 
}