javascript - 复杂的条件

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

您可以使用jQuery 的addClass和removeClass属性。

尝试这个：

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");   
}