在WordPress中使用jQuery隐藏和显示文本区
在WordPress中使用jQuery隐藏和显示文本区
提问于 2018-01-23 20:44:59
我有一个显示HTML表单的代码，其中包括下拉列表和文本区域，默认情况下，我需要将文本区域隐藏起来，一旦用户选择，文本区域就会显示。
我在https://codepen.io/上试过，它工作得很好。
但是当我在WordPress上尝试时，这段代码并不能正常工作。
代码：
<?php /* Template Name: anldept */ ?>
<!DOCTYPE html>
<html>
<head>
<title>Form Validation</title>
<!-- Latest compiled and minified BootStarp CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
$("#textarea").hide()
$("#droplistID").change(function() {
$(this).val() == 'select' ? $("#textarea").hide() : $("#textarea").show();
});
});
</script>
</head>
<body>
<div id="page-wrapper">
<div class="container">
<h1>
Send Post Data to AJAX
</h1>
<form name="myForm" class="form-horizontal" id="myform" action="#" onsubmit="return submitForm();" method="POST" enctype="multipart/form-datam">
<div class="panel panel-info">
<div class="panel-heading">Form</div>
<div class="panel-body">
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="name" class="col-md-4">Date *</label>
<div class="col-md-6">
<input type="text" class="form-control" id="name" name="name" placeholder="Enter Name" required/>
</div>
</div>
<div class="form-group">
<label for="Title" class="col-md-4">Title *</label>
<div class="col-md-6">
<input type="text" class="form-control" id="mobile" name="phone" placeholder="Enter the Title" required/>
</div>
</div>
<div class="form-group ">
<label for="category" class="col-md-4">select Category *</label>
<div class="col-md-6">
<select name="droplist" id="droplistID">
<option id = "option1" value="select" selected>Select</option>
<option id = "option2" value="category 1">category 34</option>
<option id = "option3" value="category 2">category 2</option>
<option id = "option4" value="category 3">category 3</option>
</select>
</div>
</div>
<div id="textarea">
<div class="form-group ">
<label for="text" class="col-md-4">Enter a text </label>
<div class="col-md-6">
<textarea cols="60" rows="30"> </textarea>
</div>
</div>
</div>
<div class="form-group ">
<label for="image" class="col-md-4">Select Image </label>
<div class="col-md-6">
<input type="file" class="form-control" name="image">
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-4 col-md-offset-4" style="margin-bottom: 50px;">
<center>
<input type="submit" class="btn btn-primary" value="Submit" />
</center>
</div>
</form>
</div>
</div>
</body>
</html>回答 1
Stack Overflow用户
回答已采纳
发布于 2018-01-23 20:54:57
您的代码看起来很好，而且似乎可以开箱即用。但是，WordPress可能运行不同的jQuery版本，这意味着您对$的调用不起作用。您将能够在控制台中看到这些内容，这将有助于下次发布。
为了解决这个问题，请尝试使用jQuery而不是$。您的代码应如下所示：
<script type="text/javascript">
jQuery(function() {
jQuery("#textarea").hide()
jQuery("#droplistID").change(function() {
jQuery(this).val() == 'select' ? jQuery("#textarea").hide() : jQuery("#textarea").show();
});
});
</script>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/48402103
复制相关文章
相似问题
腾讯云开发者
