Question

如何制作它，以便当我点击AT＆amp; T，8GB和黑色时显示链接，当我点击其他，8GB和白色时，它会显示不同的链接。这就是我提出的。这是我的第一次尝试，所以不要粗暴对我。我正在尝试实现与http://glyde.com/sell/iphone-4s类似的功能。

<!DOCTYPE html>
<html>

<head>

<style type="text/css">
<!--
.bgclr {background-color: white; color: black; font-weight: bold;}
-->
</style>


<script language="JavaScript">

<!-- Begin
var numQues = 3;

var numChoi = 3;

var answers = new Array(3);

// Do not change anything below here ...
function getScore(form) {
var score = 0;
var currElt;
var currSelection;
for (i=0; i<numQues; i++) {
currElt = i*numChoi;
for (j=0; j<numChoi; j++) {
  currSelection = form.elements[currElt + j];
  if (currSelection.checked) {
    if (currSelection.value == answers[i]) {
      score++;
      break;
    }
  }
}
}
</script>


</head>

<body>


<form name="quiz">

What carrier do you have?
<ul style="margin-top: 1pt">
  <li><input type="radio" name="q1" value="AT&T"/>AT&T</li>
  <li><input type="radio" name="q1" value="Other"/>Other</li>
  <li><input type="radio" name="q1" value="Unlocked"/>Unlocked</li>
</ul>

What is your phones capicity?
<ul style="margin-top: 1pt">
  <li><input type="radio" name="q2" value="8GB"/>8GB</li>
  <li><input type="radio" name="q2" value="16GB"/>16GB</li>
</ul>

What color is your phone?
<ul style="margin-top: 1pt">
  <li><input type="radio" name="q3" value="Black"/>Black</li>
  <li><input type="radio" name="q3" value="White"/>White</li>
</ul>


<input type="button" value="Get score" onClick="getScore(this.form)"/>


</body>
</html>

http://jsfiddle.net/XwN2L/2547/

Answer 1

行。向表单的每个元素添加一个“onclick”事件，该事件调用一个名为tryToMakeLink（）的方法。所以对于每个元素

<input type="radio" name="q1" value="AT&T"/>

现在应该阅读

<input type="radio" onclick=tryToMakeLink(); name="q1" value="AT&T"/>

另外，在底部添加一个div以显示动态链接。

<form name="quiz" id='quiz'>

    What carrier do you have?
    <ul style="margin-top: 1pt">
        <li><input type="radio" onclick=tryToMakeLink(); name="q1" value="AT&T"/>AT&T</li>
        <li><input type="radio" onclick=tryToMakeLink(); name="q1" value="Other"/>Other</li>
        <li><input type="radio" onclick=tryToMakeLink(); name="q1" value="Unlocked"/>Unlocked</li>
    </ul>

    What is your phones capicity?
    <ul style="margin-top: 1pt">
        <li><input type="radio" onclick=tryToMakeLink(); name="q2" value="8GB"/>8GB</li>
        <li><input type="radio" onclick=tryToMakeLink(); name="q2" value="16GB"/>16GB</li>
    </ul>

    What color is your phone?
    <ul style="margin-top: 1pt">
        <li><input type="radio" onclick=tryToMakeLink(); name="q3" value="Black"/>Black</li>
        <li><input type="radio" onclick=tryToMakeLink(); name="q3" value="White"/>White</li>
    </ul>


    <input type="button" value="Get score" onClick="getScore(this.form)"/>
    <br>
    <div id=linkDiv>
        --
    </div>
</form>

tryToMakeLink()方法执行以下操作：

看看每个收音机。如果用户没有为每个问题做出选择，则不执行任何操作。如果用户已为每个问题做出选择，则显示1个链接，如果他们有8gb＆amp; t黑色，如果他们有其他8gb白色则显示另一个链接，如果他们有任何其他组合则显示第3个链接。您可以通过向函数添加更多else if子句来轻松添加其他配置。

所以这里是（JavaScript）

    function tryToMakeLink()
    {
        //get all selected radios
        var q1=document.querySelector('input[name="q1"]:checked');
        var q2=document.querySelector('input[name="q2"]:checked');
        var q3=document.querySelector('input[name="q3"]:checked');
        //make sure the user has selected all 3
        if (q1==null || q2==null ||q3==null)
        {
            document.getElementById("linkDiv").innerHTML="--";
        }
        else
        {
            //now we know we have 3 radios, so get their values
            q1=q1.value;
            q2=q2.value;
            q3=q3.value;
            //now check the values to display a different link for the desired configuration
            if (q1=="AT&T" && q2=="8GB" && q3=="Black")
            {
                document.getElementById("linkDiv").innerHTML="<a href=#>att 8gb black</a>";
            }
            else if (q1=="Other" && q2=="8GB" && q3=="White")
            {
                document.getElementById("linkDiv").innerHTML="<a href=#>other 8b white</a>";
            }
            else
            {
                document.getElementById("linkDiv").innerHTML="<a href=#>some third option</a>";
            }
        }
    }

这是所有javascript，如您的帖子所示;但是你可能想看看jQuery。

编辑：更好的方法是在文档加载时将click事件绑定到每个单选按钮，而不是在每个输入标记中需要“onclick =”。

所以你要在身上添加一个onload

<body onLoad="attachClickEvents();">

并添加此javascript

        function attachClickEvents()
        {

            var inputs=document.getElementById('quiz').elements;
            for (var i=0;i<inputs.length;i++)
            {
                inputs[i].onclick = function() {
                    tryToMakeLink();
                };
            }
        }

Answer 2

我认为这可以帮到你！

How to change the images on button click

这是另一个我发现对同一件事有用的问题！

如何在回答某些问题时显示不同的链接

2 个答案: