的复杂条件

我有我的页面顶部的一组指令：的复杂条件

<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>

我如何更改＃第一步＃第二步的类，以便在满足上述条件的，如出现：

<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>

的思考？

来源

2013-09-29 Mark

只是想在满足条件的js转DIV＃第一步和第二步＃里面的跨度类。＃Step1将＃Step2类应用于内部跨度，并且＃step2将具有＃Step1类。这基本上是一个面包屑导航的形式，突出你的步骤。 – Mark

在帖子中，目前设置第1步似乎处于活动状态。 – Mark

小提琴？演示？有事要继续... –

您可以使用addClass & removeClass 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"); 
}

来源

2013-09-30 05:01:31

'$（“＃step1”）。children（“span”）'可以写成'$（“＃step1> span”）' –

@ThierryJ。 $（“＃step1> span”）遍历所有的子元素，这里只需要遍历第一个子元素。 –

回答

相关问题