0

我如何做到这一点，以便当我点击 AT&T、8GB 和 Black 时它会显示一个链接，而当我点击 Other、8GB 和 White 时它会显示一个不同的链接。这就是我想出的。这是我第一次尝试，所以不要对我粗暴。我正在尝试实现类似于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/

4

2 回答 2

2

好的。为表单的每个元素添加一个“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()方法执行以下操作：

看看每个收音机。如果用户没有为每个问题做出选择，什么也不做。如果用户为每个问题做出了选择，则如果他们有 8gb at&t black，则显示 1 个链接，如果他们有其他 8gb white，则显示另一个链接，如果他们有任何其他组合，则显示第 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。

编辑：一个更好的方法是在文档加载时将点击事件绑定到每个收音机，而不是在每个输入标签中都需要一个“onclick=”。

所以你给你的身体增加了一个负载

<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();
                };
            }
        }
于 2013-08-24T23:42:20.223 回答
-1

我认为这可以帮助你！

如何更改按钮单击时的图像

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

于 2013-08-24T22:58:14.620 回答