1

我需要知道如何做到这一点，以便从收音机图像生成链接到我表单中的下一个按钮。我有原始代码，当检查每个问题的所有三个问题或单选按钮时，它会生成一个链接并且该按钮变得可点击。我向其中添加了图像，它们是可点击的，但是正在生成指向下一个按钮的链接，以便可以点击它。如果您可以提供帮助，请使用详细示例，因为我是 javascript 新手。

这是带有图像单选按钮的代码：http: //jsfiddle.net/P74tn/1/

文档的 HTML：

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

<h4>What carrier do you have?</h4>
<div class="radio" id="form">
  <div style="list-style: none;" onclick=tryToMakeLink(); name="q1" value="AT&T"><img 
width="50px" height="50px" src="http://wepriceit.webs.com/ipad-5-image.jpg" /></div>
    <div style="list-style: none;" onclick=tryToMakeLink(); name="q1" value="Other">  
<img width="50px" height="50px" src="http://wepriceit.webs.com/ipad-5-image.jpg" />
</div>
    <div style="list-style: none;" onclick=tryToMakeLink(); name="q1" value="Unlocked">   
<img width="50px" height="50px" src="http://wepriceit.webs.com/ipad-5-image.jpg" />  
</div>
</div>

<br /><br /><br />

<h4>What is your phones capicity?</h4>
<div class="radio" id="form">
    <div style="list-style: none;" type="radio" onclick=tryToMakeLink(); name="q2" 
value="8GB"><img width="50px" height="50px" src="http://wepriceit.webs.com/ipad-5-
image.jpg" /></div>
    <div style="list-style: none;" type="radio" onclick=tryToMakeLink(); name="q2"  
value="16GB"><img width="50px" height="50px" src="http://wepriceit.webs.com/ipad-5-
image.jpg" /></div>
</div>

<br /><br /><br />

<h4>What color is your phone?</h4>
<div class="radio" id="form">
    <div style="list-style: none;" type="radio" onclick=tryToMakeLink(); name="q3"   
value="Black"><img width="50px" height="50px" src="http://wepriceit.webs.com/ipad-5-
image.jpg" /></div>
    <div style="list-style: none;" type="radio" onclick=tryToMakeLink(); name="q3"   
value="White"><img width="50px" height="50px" src="http://wepriceit.webs.com/ipad-5-
image.jpg" /></div>
</div>



<br>
<div id=linkDiv>
 <input type=button disabled=disabled value=Next>
</div>
</form>
4

1 回答 1

1

您的 JS 小提琴中有很多错误，我将尝试列出尽可能多的错误：

  • ID 应该是唯一的，这里有几个 div 具有相同的 id “form”。您应该重命名它们，例如id="form_carrier",id="form_color"等。

  • 您正在使用 jQuery 和 vanilla JS 的奇怪组合：使用 jQuery 处理程序格式 (ie $('.radio div').on('click', function() {});) 或内联 JS (ie onclick="tryToMakeLink();")。请注意，对于内联 JS，JS 代码必须用引号括起来。

  • 获取选择结果的选择器尝试获取<input>元素，而在 HTML 代码中，您使用的是<div>; 按照编码，您的选择器不会选择任何内容。

  • 选择:checked器仅适用于<input>元素；你不能使用它，因为你正在使用<div>元素。在这里，由于您将 class active 设置为任何选定的 div，因此您可以使用 class 选择器。

您的最终选择器将如下所示：var q1=$('div[name="q1"].active');

  • 如果选择器不匹配任何元素，它不会返回 null，它会返回一个空数组：document.querySelector('input[name="q3"]:checked')永远不会为 null。您应该将支票替换为：q1.length === 0

  • 您不能使用q1.value，因为 value 是您节点的属性。您可以使用 jQuery 函数q1 = q1.attr('value')

  • 而不是改变你的div的innerHTML，你应该简单地更新输入元素

我已经创建了您原始小提琴的一个分支，向您展示如何使其工作：http: //jsfiddle.net/rCXT5/1/

于 2013-08-25T21:48:31.527 回答