那些遇到过的问题

JQuery函数不响应单选按钮

ker*_*sun 0 javascript php jquery function

这对我来说是一个非常棘手的问题(或者我只是非常愚蠢).尝试使用JQuery功能,当用户选择某个单选按钮时,下面的表单会相应更改(例如,个人看到姓名,公司,职位,电话,电子邮件和地址.公司只看到公司,电话,电子邮件和地址.但目前点击单选按钮无效.

我还想问:1)是我的函数$('#contactType> input').在正确的地方(在其中)还是应该在其他地方？2)我可以使用index.js文件来简化它吗？如果是这样,如何做链接index.js？它只是

干杯. 

$(document).ready(function() {
  listenForInputChanges();
})

function listenForInputChanges() {
  $('#contactType >input').change(function() {
    console.log('val is ' + $(this).val())
    switch ($(this).val()) {
      case 'individual':
        $('#nameDiv').show();
        $('#companyDiv').show();
        $('#titleDiv').show();
        $('#phoneDiv').show();
        $('#emailDiv').show();
        $('#addressDiv').show();
        break;

      case 'team':
        $('#nameDiv').show();
        $('#companyDiv').show();
        $('#titleDiv').hide();
        $('#phoneDiv').show();
        $('#emailDiv').show();
        $('#addressDiv').show();
        break;

      case 'company':
        $('#nameDiv').hide();
        $('#companyDiv').show();
        $('#titleDiv').hide();
        $('#phoneDiv').show();
        $('#emailDiv').show();
        $('#addressDiv').show();
        break;
    }
  })
}
Run Code Online (Sandbox Code Playgroud) 
<!DOCTYPE html>
<html>

<head>
  <title>Create new contact</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">
  </script>


</head>

<body>
  <div class="container">
    <div class="row">
      <form method="post" class="form-horizontal col-md-6 col-md-offset-3">
        <h2>Motoko Insurance Contacts</h2>


        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
        </script>
        <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />

        <div class="form-group">
          <label for="input" class="col-sm-6 control-label">What type of contact are you adding?</label>
          <div id="contactType" class="col-sm-10">
            <input type="radio" name="Contact_type" value="individual"> Individual
            <input type="radio" name="Contact_type" value="team"> Team
            <input type="radio" name="Contact_type" value="company"> Company</div>
        </div>


        <div id="nameDiv" class="form-group">
          <label for="input1" class="col-sm-2 control-label">Name</label>
          <div class="col-sm-10">
            <input type="text" name="name" class="form-control" id="input1" placeholder="Name" />
          </div>
        </div>

        <div id="companyDiv" class="form-group">
          <label for="input1" class="col-sm-2 control-label">Company</label>
          <div class="col-sm-10">
            <input type="text" name="comp" class="form-control" id="input1" placeholder="Company" />
          </div>
        </div>

        <div id="titleDiv" class="form-group">
          <label for="input1" class="col-sm-2 control-label">Title</label>
          <div class="col-sm-10">
            <input type="text" name="title" class="form-control" id="input1" placeholder="Title" />
          </div>
        </div>

        <div id="phoneDiv" class="form-group">
          <label for="input1" class="col-sm-2 control-label">Phone</label>
          <div class="col-sm-10">
            <input type="int" name="urstel" class="form-control" id="input1" placeholder="Phone" />
          </div>
        </div>

        <div id="emailDiv" class="form-group">
          <label for="input1" class="col-sm-2 control-label">E-Mail</label>
          <div class="col-sm-10">
            <input type="email" name="email" class="form-control" id="input1" placeholder="E-mail" />
          </div>
        </div>

        <div id="addressDiv" class="form-group">
          <label for="input1" class="col-sm-2 control-label">Address</label>
          <div class="col-sm-10">
            <input type="text" name="location" class="form-control" id="input1" placeholder="Address" />
          </div>
        </div>


        <input type="submit" class="btn btn-primary col-md-2 col-md-offset-10" value="submit" />
      </form>

    </div>
  </div>
</body>

</html>
Run Code Online (Sandbox Code Playgroud)

Ger*_*NCO 5

你错过了jQuery lib.请务必在<head>页面的部分添加它:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Run Code Online (Sandbox Code Playgroud) 

$(document).ready(function() {
  listenForInputChanges();
})

function listenForInputChanges() {
  $('#contactType >input').change(function() {
    console.log('val is ' + $(this).val())
    switch ($(this).val()) {
      case 'individual':
        $('#nameDiv').show();
        $('#companyDiv').show();
        $('#titleDiv').show();
        $('#phoneDiv').show();
        $('#emailDiv').show();
        $('#addressDiv').show();
        break;

      case 'team':
        $('#nameDiv').show();
        $('#companyDiv').show();
        $('#titleDiv').hide();
        $('#phoneDiv').show();
        $('#emailDiv').show();
        $('#addressDiv').show();
        break;

      case 'company':
        $('#nameDiv').hide();
        $('#companyDiv').show();
        $('#titleDiv').hide();
        $('#phoneDiv').show();
        $('#emailDiv').show();
        $('#addressDiv').show();
        break;
    }
  })
}
Run Code Online (Sandbox Code Playgroud) 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>

<head>
  <title>Create new contact</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">
  </script>


</head>

<body>
  <div class="container">
    <div class="row">
      <form method="post" class="form-horizontal col-md-6 col-md-offset-3">
        <h2>Motoko Insurance Contacts</h2>


        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
        </script>
        <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />

        <div class="form-group">
          <label for="input" class="col-sm-6 control-label">What type of contact are you adding?</label>
          <div id="contactType" class="col-sm-10">
            <input type="radio" name="Contact_type" value="individual"> Individual
            <input type="radio" name="Contact_type" value="team"> Team
            <input type="radio" name="Contact_type" value="company"> Company</div>
        </div>


        <div id="nameDiv" class="form-group">
          <label for="input1" class="col-sm-2 control-label">Name</label>
          <div class="col-sm-10">
            <input type="text" name="name" class="form-control" id="input1" placeholder="Name" />
          </div>
        </div>

        <div id="companyDiv" class="form-group">
          <label for="input1" class="col-sm-2 control-label">Company</label>
          <div class="col-sm-10">
            <input type="text" name="comp" class="form-control" id="input1" placeholder="Company" />
          </div>
        </div>

        <div id="titleDiv" class="form-group">
          <label for="input1" class="col-sm-2 control-label">Title</label>
          <div class="col-sm-10">
            <input type="text" name="title" class="form-control" id="input1" placeholder="Title" />
          </div>
        </div>

        <div id="phoneDiv" class="form-group">
          <label for="input1" class="col-sm-2 control-label">Phone</label>
          <div class="col-sm-10">
            <input type="int" name="urstel" class="form-control" id="input1" placeholder="Phone" />
          </div>
        </div>

        <div id="emailDiv" class="form-group">
          <label for="input1" class="col-sm-2 control-label">E-Mail</label>
          <div class="col-sm-10">
            <input type="email" name="email" class="form-control" id="input1" placeholder="E-mail" />
          </div>
        </div>

        <div id="addressDiv" class="form-group">
          <label for="input1" class="col-sm-2 control-label">Address</label>
          <div class="col-sm-10">
            <input type="text" name="location" class="form-control" id="input1" placeholder="Address" />
          </div>
        </div>


        <input type="submit" class="btn btn-primary col-md-2 col-md-offset-10" value="submit" />
      </form>

    </div>
  </div>
</body>

</html>
Run Code Online (Sandbox Code Playgroud)

归档时间：

查看次数：

54 次

最近记录：

8 年 前
相关归档
你如何在jQuery中创建一个元素"flash" 241
在父项悬停时更改子元素的CSS 151
一个非常非常非常大的div 106
MySQL和PHP - 插入NULL而不是空字符串 75
JQuery/Javascript:检查var是否存在 65
在Wordpress上登录后重定向 49
将JavaScript对象合二为一 43
如何在骨干中的动态生成按钮上绑定事件？ 18
Oracle SQL:使用具有用户定义类型的LAG函数返回"不一致的数据类型" 7
var a = bc = function(){}语法的目的 5
难疑归档
什么是serialVersionUID,我为什么要使用它？ 2880
在一行中捕获多个异常(块除外) 2521
JavaScript .prototype如何工作？ 1988
如何删除已合并的所有Git分支？ 1782
外部"C"在C++中有什么影响？ 1511
如何在Python中通过索引从列表中删除元素？ 1381
如何在find中排除目录.命令 1250
在HTML中显示哪些字符可用于上/下三角(没有词干的箭头)？ 1212
Vim最有效的捷径是什么？ 1127
AngularJS中指令范围内的'@'和'='有什么区别？ 1053