Покажите DIV X, если Div Y содержит Z. Затем, покажите Div A, если Div Y содержит B

Question

У меня есть код, над которым я работал, эффективно, чтобы хэш вместе шаг за шагом.

HTML-:

<div id="stage1"><img src="/img/progress-bar/1.png"></div> 
<div id="stage2"><img src="/img/progress-bar/2.png"></div> 
<div class="deal-stage">2</div> 

Теперь я хочу, чтобы отобразить DIV # stage1 если ДИВО .deal стадия содержит номер 1. Затем я хочу, чтобы отобразить DIV # stage2, если ДИВО .deal- этап содержит номер 2.

Всего HTML выглядит нормально, это JQuery, который меня беспокоит:

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
<script type='text/javascript'>//<![CDATA[ 
$(window).load(function(){ 
if($('.deal-stage').html() == 1){ 
$("#stage1").show(); 
if($('.deal-stage').html() == 2){ 
$("#stage2").show(); 
} 
});//]]> 
</script> 

в настоящее время оба DIVs будут показаны. Я хочу добавить еще 4 шага, но я не уверен, как отображать только один из DIVS за раз, просматривая номер в DIV .deal-stage.

Любые идеи были бы очень оценены.

Спасибо!

S

Answer 1

Прячьте изображения перед загрузкой страницы, как так:

<div id="stage1" style="display:none;"><img src="/img/progress-bar/1.png"></div> 
<div id="stage2" style="display:none;"><img src="/img/progress-bar/2.png"></div> 
<div class="deal-stage">2</div> 

Затем немного изменить сценарий, чтобы сделать его немного более сговорчивым:

$(document).ready(function(){ 

if($('.deal-stage').html() == "1"){ 
    $("#stage1").show(); 
} 
if($('.deal-stage').html() == "2"){ 
    $("#stage2").show(); 
} 
}); 

И вы будете хорошо идти.