jQuery show / hide取决于输入信息

时间:2013-07-02 10:37:24

标签: jquery

我知道有3个简单的步骤来揭示与3个步骤中输入的信息相关的答案。我正在使用this show/hide script这是伟大的但是我现在要做的是当有人选择'一个伞员工'我希望下面的问题出现在下面,同样如果我选择'一个自雇的独家交易者'我想要一个不同的框出现在下面,最终根据输入的选项有一个答案(在这种情况下是相关的方案)

我无法理解如何做到这一点,因为我认为每个选项都必须被记住,以便结果与输入的信息相匹配。

这是jsfiddle

这是代码

HTML

<a href="#"><img src="http://www.paycoservices.co.uk/images/3-step-sfinder.png" width="968" height="100"  class="show_hide" alt="3 steps" /></a>

<div class="slidingDiv">
<img src="http://www.paycoservices.co.uk/images/step1.png" width="60" height="58"  class="show_hide" alt="step 1" />
<font color=white><strong><h3>I want to work as:</h3></strong></font> <a href="#"  class="show_hide"></a>
<a href="#"><img src="http://www.paycoservices.co.uk/images/umbrella-emp.png" width="389" height="58" class="show_hide"  alt="umbrella employee" /></a>
<a href="#"><img src="http://www.paycoservices.co.uk/images/self-employed.png" style="float:right; width="473"  height="58" class="show_hide" alt="umbrella employee" /></a>
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>

CSS

.slidingDiv {
height:160px;
width:928px;
background-color: #84CFF4;
padding:20px;
margin-top:5px;
border-bottom:5px solid #84CFF4;
}

.show_hide {
display:none;
}

JS

$(document).ready(function(){

    $(".slidingDiv").hide();
    $(".show_hide").show();

$('.show_hide').click(function(){
$(".slidingDiv").slideToggle();
});

});

1 个答案:

答案 0 :(得分:0)

我不确定我的问题是否合适! 但是为什么你不给链接一个ID然后检查

$("#umbrella").live("click", function() {
 shownext;
})
$("#self").live("click", function() {
 showanother;
})

进一步的步骤你做了一个if(......显示)

我希望我的问题是对的。