Question

我正在尝试模仿此网址上的功能：https://www.healthcare.gov/find-premium-estimates/

到目前为止，我提供了一个链接和代码。我正在尝试创建网站的相同功能，例如当您单击所提问题的答案时，将您下拉到下一个问题...

我在我的jsfiddle示例中遇到的一个问题是，如果您在问题2上单击“否”，它将不会显示隐藏的div，但是，如果您在同一问题上单击“是”，则它将起作用...如果你点击“不知道”，问题3也会出现。

以下是我的内容：http://jsfiddle.net/0vc9ep17/34/

这是HTML

    <h1>Question 1</h1>
    <input type="radio" name="question1" value="answer1">
    Answer 1
    <input type="radio" name="question1" value="answer2">
    Answer 2
    <div class="answer1and2 hide">
    <h1>Question 2</h1>
    <input type="radio" name="question2" value="answer3">
    Yes
    <input type="radio" name="question2" value="answer4">
    No
    </div>
<div class="answer3 hide">
        <h1>Question 3</h1>
        <input type="radio" name="question3" value="answer5">
            maybe
        <input type="radio" name="question3" value="answer6">
            Don't know
            </div>
<div class="answer5 hide">
        <h1>Question 4</h1>
        <input type="radio" name="question4" value="answer7">
            maybe
        <input type="radio" name="question4" value="answer8">
            Don't know
            </div>

以下是Javascript

 jQuery(document).ready(function () {
     jQuery('input[type="radio"]').click(function () {
         if (jQuery(this).attr("value") == "answer1") {
             jQuery(".answer1").show("slow");
             jQuery(".answer1and2").show("slow");
         }
         if (jQuery(this).attr("value") == "answer2") {
             jQuery(".answer2").show("slow");
             jQuery(".answer1and2").show("slow");
         }
         if (jQuery(this).attr("value") == "answer3") {
             jQuery(".answer3").show("slow");
             jQuery(".answer4").show("slow");
             jQuery(".answer1and2").show("slow");
         }
         if (jQuery(this).attr("value") == "answer5") {
             jQuery(".answer1and2").show("slow");             
             jQuery(".answer3").show("slow");
             jQuery(".answer4").show("slow");
             jQuery(".answer5").show("slow");

         }

     });
 });

这是CSS

.hide {
    display: none;
}

感谢您的帮助！

Answer 1

将<div class="answer1and2 hide">更改为<div class="answer1 answer2 hide">代码可以简化并涵盖所有情况：

Fiddle

jQuery(document).ready(function()
{
    jQuery('input[type="radio"]').click(function()
    {
        jQuery("." + this.value).show("slow");
    });
});

如果您想滚动到显示的问题，可以在$(window).scrollTop()完成后使用.offset()显示问题.show()：

Fiddle

jQuery(document).ready(function()
{
    jQuery('input[type="radio"]').click(function()
    {
        var showingElement = jQuery("." + this.value);
        showingElement.show("slow", function()
        {
            jQuery(window).scrollTop(showingElement.offset().top); 
        });
    });
});

注意：要使滚动正常工作，页面高度必须大于窗口高度。

Answer 2

您需要为未触发的事件添加触发器，就像您对其余事件一样。

if (jQuery(this).attr("value") == "answer4") {
         jQuery(".answer3").show("slow");
         jQuery(".answer4").show("slow");
         jQuery(".answer1and2").show("slow");
     }

if (jQuery(this).attr("value") == "answer6") {
             jQuery(".answer1and2").show("slow");             
             jQuery(".answer3").show("slow");
             jQuery(".answer4").show("slow");
             jQuery(".answer5").show("slow");

         }`

点击单选按钮滑动＆amp;显示隐藏的div＆amp;传递一个值

2 个答案: