2

每次弹出下一个问题时如何添加内容分隔符。只要它上面或下面有一个小显示器，什么样的分隔线都没有关系。我对 javascript 和 HTML 持开放态度。

例子：

q1 q2 q3 q4 （选择 q1 时，会弹出另一种形式以及内容分隔符）

q5 q6 q7 q8 （选择 q6 时，会弹出另一种形式，并带有另一个分隔符，依此类推）

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

4 回答 4

2

演示：http: //jsfiddle.net/ffKKN/7/

此选择器匹配“问题之前的问题”：

.question + .question {
    border-top: 1px solid silver;
}

为了完成这项工作，我必须删除<br style="clear:both"/>元素（无论如何这都不是一个好主意）。这些元素将你的.question元素分开。

您可能需要调整间距以使其看起来像您想要的那样（可能像这样，这会增加margin-bottom:2em每个问题）。

另一个版本，经过调整以包括间距并显示一致的宽分隔符：http: //jsfiddle.net/ffKKN/10/

于 2013-09-06T22:18:26.900 回答
0

像这样简单的东西呢：

.question {
    border-top: 1px solid black;
}

如果我不明白你的问题，请告诉我:)

于 2013-09-06T22:14:23.960 回答
0

您可以在问题之间放置 HR 标签，以下是更改 showQuestions 函数以添加该标签的方法。

    for (var i = 0; i < questions.length; i++) {
        if (i < index) {
            questions.eq(i).css("display", "block"); 
            if (i > 0) {
                questions.eq(i).before('<hr>'); 
            }
        } else {
            questions.eq(i).css("display", "none");
        }
    }

另一个愚蠢的选择：

.question + .question::before {
    content: "───────────────────────";
}
于 2013-09-06T22:18:37.280 回答
0

如果您更改了第一个标签以包含以下内容：

    <h4 class="top">What is your current carrier?</h4>

然后在你的jQuery顶部添加这个：

$(document).ready(function () {    <~~ immediately below this line
    $("h4:not(.top)").append("<hr />");

它还将提供给您的询问

于 2013-09-06T22:28:25.000 回答