我有一个javascript来隐藏元素输入字段，具体取决于隐藏字段中的值
<script type="text/javascript" charset="utf-8">
$('#ccType').change(function(){
if($(this).val() == 'maestro')
$('#cvv').closest('.name').hide();
else
$('#cvv').closest('.name').show();
});
</script>
但这并没有隐藏我想要的元素
这里是html
<html lang="en">
<head>
<meta charset="utf-8">
<title>| todo</title>
<meta name="description" content="app, web app, responsive, admin dashboard, admin, flat, flat ui, ui kit, off screen nav">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="css/bootstrap2.css">
<link rel="stylesheet" href="css/bootstrap-select.css">
<link rel="stylesheet" href="css/animate.css">
<link rel="stylesheet" href="css/font-awesome.min.css">
<link rel="stylesheet" href="css/font.css" cache="false">
<link rel="stylesheet" href="js/fuelux/fuelux.css">
<link rel="stylesheet" href="css/plugin.css">
<link rel="stylesheet" href="css/app2.css">
<link rel="stylesheet" href="css/cards.css">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="https://api.njj.com/inpage/js/tokenex-client.min.js"></script>
<script type="text/javascript">
window.onload = function getApp() {
var thisURL = window.location.href;
var thisSession = new Array();
thisSession = thisURL.split("?"); //This grabs all URL parameters
var session = thisSession[1];
thisSession = session.split("="); //This gets the session ID from URL
if (thisSession[0] == 'merchant_id') {
var thisApp = new Array();
thisApp = thisSession[1].split("&");
var webapi_MerchantID = thisApp[0];
thisApp = thisSession[2].split("&");
var passkey = thisApp[0];
thisApp = thisSession[3].split("&");
var amt = thisApp[0];
thisApp = thisSession[4].split("&");
var email = thisApp[0];
thisApp = thisSession[5].split("&");
var mobileNo = thisApp[0];
thisApp = thisSession[6].split("&");
var orderID = thisApp[0];
if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
} else { // code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
result = xmlhttp.responseText;
thisSession = result.split("&");
if (thisSession[0] != 0) {
var amount = parseFloat(thisSession[0]).toFixed(2);
var x = document.getElementsByName('amount');
for (var i = 0; i < x.length; i++) {
x[i].value = amount;
}
}
var x = document.getElementsByName('merchant_id');
for (var i = 0; i < x.length; i++) {
x[i].value = thisSession[1];
}
var x = document.getElementsByName('customerReferenceNo');
for (var i = 0; i < x.length; i++) {
x[i].value = thisSession[2];
}
var x = document.getElementsByName('email');
for (var i = 0; i < x.length; i++) {
x[i].value = thisSession[3];
}
var x = document.getElementsByName('mobileNo');
for (var i = 0; i < x.length; i++) {
x[i].value = thisSession[4];
}
}
}
xmlhttp.open("GET", "initiateConnctPay.php?merchant_id=" + webapi_MerchantID + "&passkey=" + passkey + "&amount=" + amt + "&email=" + email + "&mobileNo=" + mobileNo + "&orderID=" + orderID, true);
xmlhttp.send();
} else if (thisSession[0] == 'button_id') {
var button_id = thisSession[1];
if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
} else { // code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
result = xmlhttp.responseText;
thisSession = result.split("&");
if (thisSession[0] != 0) {
var amount = parseFloat(thisSession[0]).toFixed(2);
var x = document.getElementsByName('amount');
for (var i = 0; i < x.length; i++) {
x[i].value = amount;
}
}
var x = document.getElementsByName('merchant_id');
for (var i = 0; i < x.length; i++) {
x[i].value = thisSession[1];
}
var x = document.getElementsByName('customerReferenceNo');
for (var i = 0; i < x.length; i++) {
x[i].value = thisSession[2];
}
}
}
xmlhttp.open("GET", "initiateButtonPay.php?button_id=" + button_id, true);
xmlhttp.send();
} else if (thisSession[0] == 'inv_no') {
var inv_no = thisSession[1];
if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
} else { // code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
result = xmlhttp.responseText;
thisSession = result.split("&");
if (thisSession[0] != 0) {
var amount = parseFloat(thisSession[0]).toFixed(2);
var x = document.getElementsByName('amount');
for (var i = 0; i < x.length; i++) {
x[i].value = amount;
}
}
var x = document.getElementsByName('merchant_id');
for (var i = 0; i < x.length; i++) {
x[i].value = thisSession[1];
}
var x = document.getElementsByName('customerReferenceNo');
for (var i = 0; i < x.length; i++) {
x[i].value = thisSession[2];
}
var x = document.getElementsByName('email');
for (var i = 0; i < x.length; i++) {
x[i].value = thisSession[3];
}
}
}
xmlhttp.open("GET", "initiateInvoicePay.php?inv_no=" + inv_no, true);
xmlhttp.send();
} else if (thisSession[0] == 'resrvCode') {
} else if (thisSession[0] == 'collctCode') {
} else {
alert("You are unauthorized to use this application!");
document.getElementById("btn_process").disabled = true;
document.getElementById("nb_process").disabled = true;
}
}
</script>
</head>
<body>
<section id="content" class="m-t-lg wrapper-md animated fadeInDown">
<div class="row m-n">
<div class="col-md-4 col-md-offset-4 m-t-lg">
<section class="panel">
<header class="panel-heading bg-light">
<ul class="nav nav-tabs nav-justified">
<li class="active" id="cc"><a style="font-size:15px;font-weight:500;" href="#home" data-toggle="tab">Credit Card</a>
</li>
<li id="db"><a style="font-size:15px;font-weight:500;" href="#home" data-toggle="tab">Debit Card</a>
</li>
<li><a style="font-size:15px;font-weight:500;" href="#messages" data-toggle="tab">Internet Banking</a>
</li>
</ul>
</header>
<div class="panel-body">
<div class="tab-content">
<div class="tab-pane active" id="home">
<form method="post" action="./TokenProcess.php" id="cardpayment">
<input id="txtEncryptionKey" name="txtEncryptionKey" class="tokenex_encryptionkey" <input id="txtEncryptionKey" name="txtEncryptionKey" class="tokenex_encryptionkey" type="hidden" value="MIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEA8gGPMwBRPuVyJReZGIkW
H/+Bf5pnpDN1bSR2cLYLXVT8CaSnTw74qeboSnktgYCi1D9R3Bj2fYzTIwGGZb8K
inLdxwbqZmHwrE9cFhCaHbG/fcURzl2Hnw/inqyMy
+JB6djTq2/BdzMAhWTh3cDWq9Xu+gEkb/QCd0n1yYIdKuDISlk/AfHdWe34IvzhV
yQIDAQAB
" />
<div class="form-group" style="margin-left:0px">
<input type='hidden' id='ccType' name='ccType' />
<ul class="cards">
<li class="visa">Visa</li>
<li class="visa_electron">Visa Electron</li>
<li class="mastercard">MasterCard</li>
<li class="maestro">Maestro</li>
</ul>
</div>
<div class="form-group">
<label class="control-label">Card Number</label>
<input type="text" name="ccnumber" id="ccnumber" placeholder="411111111111111" class="form-control tokenex_data">
</div>
<div class="form-group">
<label class="control-label">CVV</label>
<input type="password" id="cvv" name="cvv" placeholder="123" class="form-control">
</div>
<div class="form-group">
<label class="control-label" style="display:inline;">Expiry</label>
<div class="clearfix">
<div class="inline pull-left m-r">
<div style="height:30px">
<select class="selectpicker" id="expiry_month" name="expiry_month">
<option selected>Select Month</option>
<option value="01">January</option>
<option value="02">February</option>
<option value="03">March</option>
<option value="04">April</option>
<option value="05">May</option>
<option value="06">June</option>
<option value="07">July</option>
<option value="08">August</option>
<option value="09">September</option>
<option value="10">October</option>
<option value="11">November</option>
<option value="12">December</option>
</select>
</div>
</div>
<div class="inline pull-left m-r">
<div style="height:30px">
<select class="selectpicker" id="expiry_year" name="expiry_year">
<option selected>Select Year</option>
<option value="2012">2012</option>
<option value="2013">2013</option>
<option value="2014">2014</option>
<option value="2015">2015</option>
<option value="2016">2016</option>
<option value="2017">2017</option>
<option value="2018">2018</option>
<option value="2019">2019</option>
<option value="2020">2020</option>
<option value="2021">2021</option>
<option value="2022">2022</option>
<option value="2023">2023</option>
<option value="2024">2024</option>
<option value="2025">2025</option>
<option value="2026">2026</option>
<option value="2027">2027</option>
<option value="2028">2028</option>
<option value="2029">2029</option>
<option value="2030">2030</option>
<option value="2031">2031</option>
<option value="2032">2032</option>
<option value="2033">2033</option>
<option value="2034">2034</option>
<option value="2035">2035</option>
<option value="2036">2036</option>
</select>
</div>
</div>
</div>
</div>
<div class="form-group">
<label class="control-label">Amount</label>
<input type="text" name="amount" id="amount" placeholder="100.00" class="form-control">
</div>
<div class="form-group">
<label class="control-label">Name on card</label>
<input type="text" name="name_on_card" id="name_on_card" placeholder="Enter name as on card" class="form-control">
</div>
<div class="form-group">
<label class="control-label">Email</label>
<input type="text" name="email" id="email" placeholder="Enter your Email" class="form-control">
</div>
<div class="form-group">
<label class="control-label">Mobile Number</label>
<input type="text" name="mobileNo" id="mobileNo" placeholder="Enter your mobile number" class="form-control">
</div>
<div class="form-group">
<input type="hidden" name="merchant_id">
<input type="hidden" name="customerReferenceNo">
<input type="hidden" name="selectedRadioValue" class="selectedRadioValue">
</div>
<div style="margin-left:35%">
<button type="submit" id="btn_process" name="btn_process" class="btn btn-info tokenex_submit">Pay Now</button>
</div>
<div class="line line-dashed"></div>
<div>
<div style="float:left;margin-right:7%;">
<img src="http://www.fethr.com/webapp/images/lock.png">
</div>
<p style="display:inline;"><small>Your card details are secured via 128 bit encryption</small>
</p>
</div>
</form>
</div>
<div class="tab-pane" id="messages"></div>
</div>
</div>
</section>
</div>
</div>
</section>
<script src="js/jquery.min.js"></script>
<!-- Bootstrap -->
<script src="js/bootstrap.js"></script>
<!-- App -->
<!-- Fuelux -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="js/bootstrap-select.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.selectpicker').selectpicker({
style: 'btn btn-white btn-sm'
});
});
</script>
<script type="text/javascript" src="https://api.toke.com/inpage/js/tokenex-client.min.js"></script>
<script type="text/javascript">
$(function() {
$('button').on('click', function() {
if ($("#cc").hasClass("active")) {
$('.selectedRadioValue').val('radio1');
} else if ($("#db").hasClass("active")) {
$('.selectedRadioValue').val('radio2');
}
});
});
</script>
<script type="text/javascript" charset="utf-8">
$('#ccType').change(function() {
if ($(this).val() == 'maestro') $('#cvv').closest('.name').hide();
else $('#cvv').closest('.name').show();
});
</script>
<script src="js/cardvalidation.js"></script>
</body>
</html>
答案 0 :(得分：1)
你没有一个“名字”类，因此最接近的找不到匹配...请尝试这样做：
<script type="text/javascript" charset="utf-8">
$('#ccType').change(function() {
if ($(this).val() == 'maestro')
$('#cvv').hide();
else
$('#cvv').show();
});
</script>