Fatal编程技术网
  • jquery/
  • Jquery .show（）不工作

Jquery .show（）不工作

jquery html

Jquery .show（）不工作,jquery,html,Jquery,Html,这是我的密码： <script type="text/javascript"> $('#reqtype').on('change', function() { if ($(this).val() === "Edit") { $("#crtype").show() } else { $("#crtype").hide() } }); $('#crtypes').on('change', function() { if ($(this).val() ===

这是我的密码：

<script type="text/javascript">
$('#reqtype').on('change', function() {
  if ($(this).val() === "Edit") {
    $("#crtype").show()
  } else {
    $("#crtype").hide()
  }
});
$('#crtypes').on('change', function() {
  if ($(this).val() === "editrule") {
    $("#ruletitle").show();
  } else if ($(this).val() === "addrule") {
    $("#ruletitle").show();
  } else {
    $("#ruletitle").hide()
  }
});
</script>
这是我的html：

<body>
<div>
  <label>Request Type*:</label>
  <select name="reqtype" id="reqtype" required tabindex="4">
    <option value="">- Select Request Type -</option>
    <option value="Create">Create</option>
    <option value="Edit">Edit</option>
  </select>
  <br/>
  <br/>
</div>
<div>
  <label>Assignment Profile ID
    <br/><span style="font-weight:normal; font-
      style:italic">(Leave blank if requesting new Assignment Profile)         
      </span>:</label>
  <input name="assignmentid" size="50" tabindex="5" type="text" class="w250" />
  <br/>
  <br/>
</div>
<div id="crtype" style="display:none;">
  <label for="changerequesttype">Change Request Type</label>
  <select name="crtypes" id="crtypes">
    <option>Choose Request Type</option>
    <option value="addrule">Add Rule</option>
    <option value="editrule">Edit Rule</option>
    <option value="addcontent">Add Content</option>
    <option value="editcontent">Edit Content</option>
  </select>
  <br/>
  <br/>
  <div id="ruletitle" style="display:none;">
    <label>Rules (Rule Title):</label>
    <input name="ruletitle" size="50" tabindex="5" type="text" class="w250" />
    <br/>
    <br/>
    <label>Rules (Attribute):</label>
    <select name="ruleattribute" id="ruleattribute" tabindex="8">
      <option value="">- Select Attribute -</option>
      <option value="Business Group">Business Group</option>
      <option value="Business Unit">Business Unit</option>
      <option value="Business Value Center">Business Value Center</option>
      <option value="Company Code">Company Code</option>
      <option value="Customer Code">Customer Code</option>
      <option value="Employee ID">Employee ID</option>
      <option value="Function">Function</option>
      <option value="Is People Leader?">Is People Leader?</option>
      <option value="Job Family">Job Family</option>
      <option value="Job Grade">Job Grade</option>
      <option value="Address">Address</option>
      <option value="Alternate Job Code ID">Alternate Job Code ID</option>
      <option value="City">City</option>
      <option value="Country">Country</option>
      <option value="Domain ID">Domain ID</option>
      <option value="Employee Status ID">Employee Status ID</option>
      <option value="Employee Type ID">Employee Type ID</option>
      <option value="Is Full-Time">Is Full-Time</option>
      <option value="Hire Date">Hire Date</option>
      <option value="Hire Month">Hire Month</option>
      <option value="Is Supervisor">Is Supervisor</option>
      <option value="Item Completion">Item Completion</option>
      <option value="Job Location ID">Job Location ID</option>
      <option value="Job Code ID">Job Code ID</option>
      <option value="Organization ID">Organization ID</option>
      <option value="Postal Code">Postal Code</option>
      <option value="Region ID">Region ID</option>
      <option value="Regular/Temp">Regular/Temp</option>
      <option value="State">State</option>
      <option value="User ID">User ID</option>
      <option value="Supervisor ID">Supervisor ID</option>
      <option value="Plant ID">Plant ID</option>
      <option value="Sub Function">Sub Function</option>
      <option value="Vendor Code">Vendor Code</option>
    </select>
    <br/>
    <br/>
    <label>Rules (Operator):</label>
    <select name="ruleoperator" id="ruleoperator" tabindex="8">
      <option value="">- Select Operator -</option>
      <option value="Contains">Contains</option>
      <option value="Does Not Contain">Does Not Contain</option>
      <option value="Does Not Match">Does Not Match</option>
      <option value="Does Not Start With">Does Not Start With
      </option>
      <option value="Matches">Matches</option>
      <option value="Is Empty">Is Empty</option>
      <option value="Is Not Empty">Is Not Empty</option>
      <option value="Starts With">Starts With</option>
    </select>
    <br/>
    <br/>
    <label>Rules (Value):</label>
    <input name="rulevalue" size="50" tabindex="5" type="text" class="w250" />
    <br/>
    <br/>
  </div>
</div>
</body>
我的问题是：当我从第一个下拉列表中选择Edit:时，它应该显示更改请求类型。如果我从下拉列表中选择添加或编辑规则，它将显示接下来的3个字段。这在JSFiddle上运行良好。

当我把代码放回我的大页面时，它失败了。所以我把它精简到了这里看到的最低代码，它仍然无法工作。我缺少什么？

在使用jQuery$函数之前，需要加载jQuery。jQuery包含在JSFIDLE中，这就是JavaScript在那里运行的原因

将此项添加到第一项之前：

更多详细信息：

我会在浏览器中打开开发人员工具，放置断点并遍历它们。在大多数情况下，快捷键是f12。在if$this.val==Edit处设置一个断点，然后当断点命中它时，突出显示$this.val，然后右键单击并选择add to watch。它还将告诉您，如果Metis显示您的html中没有任何jquery文件链接，因为您将得到一个错误，即jquery函数基本上不存在。

请尝试：

$.getScript("insert name of jquery file", function(){

    //do something simple with jQuery Here

 });
或

我想看看您的文件是否有问题，因为这两个函数中的代码都应该在加载jQuery脚本后触发。此外，在库中导入时，尝试使用绝对路径而不是相对路径，看看这是否有助于解决问题

另一个元素是否具有相同的ID reqtype 将代码包装如下 将脚本放在body closing标记之前的页面底部，并在代码之前调用jquery.js脚本。 $document.readyfunction{

$('#reqtype').on('change', function () {
    //code 
});

$('#crtypes').on('change', function () {
    //code
});
})

必须包含jquery库才能使用jquery函数。我在HTML中没有看到jquery脚本。您确实在jsfiddle上链接了jquery。。。。这就是它在那里工作的原因。我根据您的建议和@B1ll建议在下面添加了以下行：我把它放在我的第一个脚本行之前，但它仍然不工作……您的脚本目录中有jquery吗？您必须链接到jquery库。如果脚本的目录中没有jquery库，那么src属性的路径将不起作用。我甚至复制了文件名并将其粘贴到代码中，这样我就不会拼错任何东西或遗漏任何句点。我下载的文件是jquery-3.2.1.js。代码现在反映了这一变化。我使用你的链接如上所述没有运气。我已经下载了3.2.1文件，将它放在我的脚本目录中，并将其链接到我的代码中，但仍然失败。还有其他想法吗？提前谢谢。在这种情况下，我会在浏览器中打开开发人员工具，转到控制台，然后输入$document。如果出现类似于[document，context:document]的内容，则jQuery已加载。 
$(window).on('load', function() {
    // do something simple with jQuery
});

$('#reqtype').on('change', function () {
    //code 
});

$('#crtypes').on('change', function () {
    //code
});