Question

我是Javascript和Jquery的新手，我正在尝试创建一种问卷风格页面。

基本上我想问一个问题，然后一旦我选择了答案，将所有内容都缩小，然后以正常大小显示下一个问题。

我的大部分页面都在显示和隐藏方面工作但是当我尝试使初始问题文本变小时，我似乎无法使代码工作。

我已经阅读了很多教程和示例，但似乎没有任何工作，我非常感谢任何指导。

提前致谢！

这是我的HTML

<form>
   <fieldset class="form1">
      <p>what problem is the customer having ?</p>
      <input type="radio" name="issue" value="o - issue1" onClick="getIssueVar()">issue1<br/>
      <input type="radio" name="issue" value="o - issue2" onClick="getIssueVar()">issue2<br/>
      <input type="radio" name="issue" value="o - issue3" onClick="getIssueVar()">issue3<br/>
      <input type="radio" name="issue" value="o - issue4" onClick="getIssueVar()">issue4<br/>
   </fieldset>
</form>
<br/>

这是我的Javascript：

function getIssueVar() {
   var xissue = document.getElementById("testform");
   var issuetext = "";
   var iissue;
   for (iissue = 0; iissue < xissue.length ;iissue++) {
      if (xissue[iissue].checked) {
         issuetext=xissue[iissue].value;
         break;
      }
    }
   document.getElementById("faultissue").innerHTML = issuetext;
   $(".form2").show();
   $(".form1").css('font-size', '10px');
}

我已经设置了我的CSS：

.form1
{
font-size:14px;
}

所以我想我会在点击单选按钮后使用javascript / jquery来改变字体大小。

我做错了什么？

Answer 1

<强> HTML

<form>
   <fieldset class="form1">
      <p>what problem is the customer having ?</p>
      <input type="radio" name="issue" value="o - issue1" onClick="getIssueVar()" class="testform">issue1<br/>
      <input type="radio" name="issue" value="o - issue2" onClick="getIssueVar()" class="testform">issue2<br/>
      <input type="radio" name="issue" value="o - issue3" onClick="getIssueVar()" class="testform">issue3<br/>
      <input type="radio" name="issue" value="o - issue4" onClick="getIssueVar()" class="testform">issue4<br/>
   </fieldset>
</form>  

<div id="faultissue"></div>

SCRIPT

function getIssueVar() {
    debugger
   var xissue = document.getElementsByClassName("testform");
   var issuetext = "";
   var iissue;
   for (iissue = 0; iissue < xissue.length ;iissue++) {
      if (xissue[iissue].checked) {
         issuetext=xissue[iissue].value;
         break;
      }
    }
   document.getElementById("faultissue").innerHTML = issuetext;
   $(".form2").show();
   $(".form1").css('font-size', '10px');
}

<强> DEMO
从您的代码看，testform按钮标记中缺少radio类。并且缺少标识为faultissue的元素。

Answer 2

这是一个使用delegated on()点击方法的jQuery解决方案。

<form>
   <fieldset class="form1">
      <p>what problem is the customer having ?</p>
      <input type="radio" name="issue" value="o - issue1" >issue1
      <br>
      <input type="radio" name="issue" value="o - issue2" >issue2
      <br>
      <input type="radio" name="issue" value="o - issue3" >issue3
      <br>
      <input type="radio" name="issue" value="o - issue4" >issue4
   </fieldset>
</form>

.minimize {
    font-size: 0.5em;
}

$('fieldset').on('click', 'input[type="radio"]', function() {
    $radio = $(this);
    $fieldset = $radio.parent();
    $fieldset.addClass('minimize');
});

jsFiddle：http://jsfiddle.net/w4L1g2dc/

我添加了一个类，但如果需要，可以直接设置CSS。

选择选项后，使表单字段集文本变小

2 个答案: