0

回答時にフォームが折りたたまれるようにするにはどうすればよいですか? 私は javascript と jquery を使用することにオープンです。Java と jquery で折りたたみ可能なフォームを Web で検索しましたが、役立つものはありません。

jsfiddle のフォームは次のとおりです: http://jsfiddle.net/itay1989/ffKKN/6/

フォームの JavaScript は次のとおりです。

$(document).ready(function () {
$('.radio div').on('click', function () {
    var $this = $(this),
        $parent = $this.parent(),
        value = $this.attr('value');

    $parent.children().removeClass('active');
    $this.addClass('active');
    $parent.attr('value', value);

    //get all selected radios
    var q1 = $('div[name="q1"].active');
    var q2 = $('div[name="q2"].active');
    var q3 = $('div[name="q3"].active');
    var q4 = $('div[name="q4"].active');

    //make sure the user has selected all 3
    if (q1.length !== 0 && q2.length !== 0 && q3.length !== 0 && q4.length !== 0) {
        //now we know we have 3 radios, so get their values
        q1 = q1.attr('value');
        q2 = q2.attr('value');
        q3 = q3.attr('value');
        q4 = q4.attr('value');

        // activate button
        $('#next_button').removeAttr('disabled');

        //now check the values to display a different link for the desired  
configuration
        if (q1 == "AT&T" && q2 == "8GB" && q3 == "Black" && q4 == "Black") {
            $('#next_button').val('att 8gb black').click(function () {
                window.location.href = 'http://google.com/'
            });
        } else if (q1 == "AT&T" && q2 == "16GB" && q3 == "White" && q4 == "Black") {
            document.getElementById("linkDiv").innerHTML = "<input type=button 
value=Next onclick=\"window.location.href='http://bing.com/';\">another  
option</input>";
        } else if (q1 == "AT&T" && q2 == "16GB" && q3 == "Black" && q4 == "Black") {
            document.getElementById("linkDiv").innerHTML = "<input type=button 
value=Next onclick=\"window.location.href='http://gmail.com/';\">oops</input>";
        } else if (q1 == "AT&T" && q2 == "8GB" && q3 == "White" && q4 == "Black") {
            document.getElementById("linkDiv").innerHTML = "<input type=button 
value=Next onclick=\"window.location.href='http://hotmail.com/';\">can't</input>";
        } else if (q1 == "Unlocked" && q2 == "8GB" && q3 == "White" && q4 == "Black") {
            document.getElementById("linkDiv").innerHTML = "<input type=button 
value=Next onclick=\"window.location.href='http://wepriceit.webs.com/';\">red</input>";
        } else if (q1 == "Unlocked" && q2 == "8GB" && q3 == "Black" && q4 == "Black") {
            document.getElementById("linkDiv").innerHTML = "<input type=button  
value=Next onclick=\"window.location.href='http://webs.com/';\">orange</input>";
        } else if (q1 == "Unlocked" && q2 == "16GB" && q3 == "White" && q4 == "Black")     
{
            document.getElementById("linkDiv").innerHTML = "<input type=button  
value=Next onclick=\"window.location.href='http://gazelle.com/';\">green</input>";
        } else if (q1 == "Unlocked" && q2 == "16GB" && q3 == "Black" && q4 == "Black")  
{
            document.getElementById("linkDiv").innerHTML = "<input type=button  
value=Next onclick=\"window.location.href='http://glyde.com/';\">blue</input>";
        } else if (q1 == "AT&T") {
            document.getElementById("linkDiv").innerHTML = "<input type=button 
value=Next onclick=\"iphone4';\">blue</input>";
        }
    }

});

var questions = $(".question");
var showQuestions = function (index) {
    for (var i = 0; i < questions.length; i++) {
        if (i < index) {
            questions.eq(i).css("display", "block");

        } else {
            questions.eq(i).css("display", "none");
        }
    }

    if (index > 1) {
        // only scroll to the questions after the first one is clicked
        $('html, body').animate({
            scrollTop : $(questions.eq(index - 1)).offset().top
        },'slow');
    }
}

for (var i = 0; i < questions.length; i++) {
    (function (index) {
        questions.eq(index).find("div[type='radio']").on("click", function () {
            showQuestions(index + 2);
        })
    })(i);
}
showQuestions(1);

}); //]]>
4

1 に答える 1

0

jquery のトグルを使用して、要素の表示と非表示を切り替えることができると思います。多分それはあなたのコードを簡素化し、それを機能させることができます. ここを参照してください: http://api.jquery.com/toggle/

于 2013-09-06T21:57:23.660 に答える