javascript - 无响应的 id 的单击事件处理程序。（或者至少我认为）
问题描述
我使用 Bootstrap 构建了一个弹出按钮模块，旨在将其添加到我的每个产品页面。下面列出了我遇到的障碍问题。
*这是我在这里的第一篇文章，所以如果发布了任何不必要的内容或者我的问题格式应该不同，请告诉我。
问题是我设置了一个下拉菜单，允许网站用户选择他们的电子邮件信息请求的主题。另一个选项向我提出了一个问题，我是否应该删除下拉菜单并提供一个文本文件供用户填写以最适合他们的进化需求。
我无法在控制台中找到响应（以我的技术能力），因此我知道如何将其分配为消失并在选择“其他”选项时允许其他字段出现。我附加了两个变体，并希望让其中一个工作但没有成功。请指教。
谢谢！Ĵ
//What I expected to work and did not.
/* First attempt code start */
// $(document).ready(function(){
// console.log("Do Something rad today...");
// $('#mce-other-subject').hide();
// });
// $('#tenth-choice').on("click", function () {
// $('#mce-MMERGE3').hide();
// $('#mce-other-subject').show();
// });
/* First attempt code end */
/* Second attempt code start */
// var newDiv = document.getElementById('tenth-choice');
// newDiv.addEventListener("click", listener, false);
// function listener() {
// document.getElementById('tenth-choice').innerHTML = "other";
// $('#mce-MMERGE3').hide();
// $('#mce-other-subject').show();
// }
// /* Second attempt code end */<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Working primary content for button click - Module pop out -->
<!doctype html>
<html lang="en">
<head>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<title>Title</title>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- additional meta tags -->
<meta author=" Jxxxx Sxxxx ">
<meta copyright="© 2019 | Jxxxx Sxxxx ">
<meta user="RxxxxxxxxxxxxSxxxx.com">
<meta keywords="bootstrap, html, jquery, module, button, contact, form, javascript">
<!-- Jquery | Javascript -->
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous" async></script>
</head>
<body>
<!--------------- primary button ---------------------------------->
<button type="button" class="btn btn-info" data-toggle="modal" data-target="#exampleModalLong" id="ques-btn" style=" margin-left: 40%; margin-top:10%;">
Have Questions
</button>
<!--------------- Modal Begin ----------------------->
<div class="modal fade" id="exampleModalLong" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header" style="background-color: rgba(255,255,255, .003);">
<h5 class="modal-title text-center" id="exampleModalLongTitle">Contact Our Tech Department</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<!-- Begin Mailchimp Signup Form -->
<link href="//cdn-images.mailchimp.com/embedcode/classic-10_7.css" rel="stylesheet" type="text/css">
<style type="text/css">
#mc_embed_signup {
background-color: "rgba(255,255,255, .003)";
clear: left;
font: 14px Helvetica, Arial, sans-serif;
}
/* Add your own Mailchimp form style overrides in your site stylesheet or in this style block.
We recommend moving this block and the preceding CSS link to the HEAD of your HTML file. */
</style>
<div id="mc_embed_signup">
<form action="https://thedomain.com/things/morethings/onelastthing" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
<div id="mc_embed_signup_scroll">
<h2>Have questions? We are here to help</h2>
<div class="indicates-required"><span class="asterisk">*</span> indicates required</div>
<div class="mc-field-group">
<label for="mce-EMAIL"> <span class="asterisk"></span>
</label>
<input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL" placeholder=" * Your@email.com * ">
</div>
<div class="mc-field-group">
<label for="mce-FNAME"> </label>
<input type="text" value="" name="FNAME" class="" id="mce-FNAME" placeholder="First Name">
</div>
<div class="mc-field-group">
<label for="mce-LNAME"> </label>
<input type="text" value="" name="LNAME" class="" id="mce-LNAME" placeholder="Last Name">
</div>
<div class="mc-field-group">
<label for="mce-Link"> </label>
<input type="text" value="" name="LINK" class="" id="mce-LNAME" placeholder="https://linkGoesHere.com">
</div>
<div class="mc-field-group size1of2">
<label for="mce-MMERGE4"> </label>
<input type="number" name="MMERGE4" class="" value="" id="mce-MMERGE4" placeholder="5 5 5 - 5 5 5 - 5 5 5 5">
</div>
<div class="mc-field-group">
<label for="mce-MMERGE3"> </label>
<select name="MMERGE3" class="" id="mce-MMERGE3">
<option value="">Email Subject</option>
<option value="First Choice">Schedule a Bike Fit</option>
<option value="Second Choice">Schedule Bike Service</option>
<option value="Third Choice">Order Question</option>
<option value="fourth Choice">Overseas shipping</option>
<option value="fifth Choice">I want to do a custom build</option>
<option value="Sixth Choice">I dont see it on your site, Can you get it for me?</option>
<option value="Seventh Choice">Request a call back</option>
<option value="Eigth Choice">Upcoming Rides</option>
<option value="Nineth Choice">Waranty</option>
<option value="Tenth Choice" id="tenth-choice">Other</option>
</select>
<div class="mc-field-group">
<label for="mce-other-subject"> </label>
<input type="text" value="" name="other-subject" class="" id="mce-other-subject" placeholder="RE: ( alt: Custom subject )">
</div>
</div>
<div class="mc-field-group">
<label for="mce-MMERGE5"> <span class="asterisk">*</span>
</label>
<input type="text" value="" name="MMERGE5" class="required" id="mce-MMERGE5" placeholder=" * Your quesitons go here . . . * ">
</div>
<div class="mc-field-group input-group">
<strong>Format </strong>
<ul>
<li><input type="radio" value="html" name="EMAILTYPE" id="mce-EMAILTYPE-0"><label for="mce-EMAILTYPE-0"> html</label></li>
<li><input type="radio" value="text" name="EMAILTYPE" id="mce-EMAILTYPE-1"><label for="mce-EMAILTYPE-1"> text</label></li>
</ul>
</div>
<div id="mce-responses" class="clear">
<div class="response" id="mce-error-response" style="display:none"></div>
<div class="response" id="mce-success-response" style="display:none"></div>
</div>
<!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
<div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_0e27360bc21d21bdeb3dc8509_e155794398" tabindex="-1" value=""></div>
<div class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button"></div>
</div>
</form>
</div>
<script type='text/javascript' src='//s3.amazonaws.com/downloads.mailchimp.com/js/mc-validate.js'></script>
<script type='text/javascript'>
(function($) {
window.fnames = new Array();
window.ftypes = new Array();
fnames[0] = 'EMAIL';
ftypes[0] = 'email';
fnames[1] = 'FNAME';
ftypes[1] = 'text';
fnames[2] = 'LNAME';
ftypes[2] = 'text';
fnames[4] = 'MMERGE4';
ftypes[4] = 'number';
fnames[3] = 'MMERGE3';
ftypes[3] = 'dropdown';
fnames[5] = 'MMERGE5';
ftypes[5] = 'text';
}(jQuery));
var $mcj = jQuery.noConflict(true);
</script>
<!--End mc_embed_signup-->
</div>
<div class="modal-footer">
<button type="button" class="btn btn-outline-info" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
</body>
</html>
解决方案
这是切换自定义主题输入字段组所需的功能：
$(function () {
var subjectInputGroup = $('#mce-other-subject').closest('.mc-field-group');
subjectInputGroup.hide()
$('#mce-MMERGE3').on('change', function (e) {
if ($('option:selected', this).attr('id') == 'tenth-choice') {
subjectInputGroup.show()
}
else {
subjectInputGroup.hide()
}
})
})<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Working primary content for button click - Module pop out -->
<!doctype html>
<html lang="en">
<head>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<title>Title</title>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- additional meta tags -->
<meta author=" Jxxxx Sxxxx ">
<meta copyright="© 2019 | Jxxxx Sxxxx ">
<meta user="RxxxxxxxxxxxxSxxxx.com">
<meta keywords="bootstrap, html, jquery, module, button, contact, form, javascript">
<!-- Jquery | Javascript -->
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous" async></script>
</head>
<body>
<!--------------- primary button ---------------------------------->
<button type="button" class="btn btn-info" data-toggle="modal" data-target="#exampleModalLong" id="ques-btn" style=" margin-left: 40%; margin-top:10%;">
Have Questions
</button>
<!--------------- Modal Begin ----------------------->
<div class="modal fade" id="exampleModalLong" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header" style="background-color: rgba(255,255,255, .003);">
<h5 class="modal-title text-center" id="exampleModalLongTitle">Contact Our Tech Department</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<!-- Begin Mailchimp Signup Form -->
<link href="//cdn-images.mailchimp.com/embedcode/classic-10_7.css" rel="stylesheet" type="text/css">
<style type="text/css">
#mc_embed_signup {
background-color: "rgba(255,255,255, .003)";
clear: left;
font: 14px Helvetica, Arial, sans-serif;
}
/* Add your own Mailchimp form style overrides in your site stylesheet or in this style block.
We recommend moving this block and the preceding CSS link to the HEAD of your HTML file. */
</style>
<div id="mc_embed_signup">
<form action="https://thedomain.com/things/morethings/onelastthing" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
<div id="mc_embed_signup_scroll">
<h2>Have questions? We are here to help</h2>
<div class="indicates-required"><span class="asterisk">*</span> indicates required</div>
<div class="mc-field-group">
<label for="mce-EMAIL"> <span class="asterisk"></span>
</label>
<input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL" placeholder=" * Your@email.com * ">
</div>
<div class="mc-field-group">
<label for="mce-FNAME"> </label>
<input type="text" value="" name="FNAME" class="" id="mce-FNAME" placeholder="First Name">
</div>
<div class="mc-field-group">
<label for="mce-LNAME"> </label>
<input type="text" value="" name="LNAME" class="" id="mce-LNAME" placeholder="Last Name">
</div>
<div class="mc-field-group">
<label for="mce-Link"> </label>
<input type="text" value="" name="LINK" class="" id="mce-LNAME" placeholder="https://linkGoesHere.com">
</div>
<div class="mc-field-group size1of2">
<label for="mce-MMERGE4"> </label>
<input type="number" name="MMERGE4" class="" value="" id="mce-MMERGE4" placeholder="5 5 5 - 5 5 5 - 5 5 5 5">
</div>
<div class="mc-field-group">
<label for="mce-MMERGE3"> </label>
<select name="MMERGE3" class="" id="mce-MMERGE3">
<option value="">Email Subject</option>
<option value="First Choice">Schedule a Bike Fit</option>
<option value="Second Choice">Schedule Bike Service</option>
<option value="Third Choice">Order Question</option>
<option value="fourth Choice">Overseas shipping</option>
<option value="fifth Choice">I want to do a custom build</option>
<option value="Sixth Choice">I dont see it on your site, Can you get it for me?</option>
<option value="Seventh Choice">Request a call back</option>
<option value="Eigth Choice">Upcoming Rides</option>
<option value="Nineth Choice">Waranty</option>
<option value="Tenth Choice" id="tenth-choice">Other</option>
</select>
<div class="mc-field-group">
<label for="mce-other-subject"> </label>
<input type="text" value="" name="other-subject" class="" id="mce-other-subject" placeholder="RE: ( alt: Custom subject )">
</div>
</div>
<div class="mc-field-group">
<label for="mce-MMERGE5"> <span class="asterisk">*</span>
</label>
<input type="text" value="" name="MMERGE5" class="required" id="mce-MMERGE5" placeholder=" * Your quesitons go here . . . * ">
</div>
<div class="mc-field-group input-group">
<strong>Format </strong>
<ul>
<li><input type="radio" value="html" name="EMAILTYPE" id="mce-EMAILTYPE-0"><label for="mce-EMAILTYPE-0"> html</label></li>
<li><input type="radio" value="text" name="EMAILTYPE" id="mce-EMAILTYPE-1"><label for="mce-EMAILTYPE-1"> text</label></li>
</ul>
</div>
<div id="mce-responses" class="clear">
<div class="response" id="mce-error-response" style="display:none"></div>
<div class="response" id="mce-success-response" style="display:none"></div>
</div>
<!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
<div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_0e27360bc21d21bdeb3dc8509_e155794398" tabindex="-1" value=""></div>
<div class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button"></div>
</div>
</form>
</div>
<script type='text/javascript' src='//s3.amazonaws.com/downloads.mailchimp.com/js/mc-validate.js'></script>
<script type='text/javascript'>
(function($) {
window.fnames = new Array();
window.ftypes = new Array();
fnames[0] = 'EMAIL';
ftypes[0] = 'email';
fnames[1] = 'FNAME';
ftypes[1] = 'text';
fnames[2] = 'LNAME';
ftypes[2] = 'text';
fnames[4] = 'MMERGE4';
ftypes[4] = 'number';
fnames[3] = 'MMERGE3';
ftypes[3] = 'dropdown';
fnames[5] = 'MMERGE5';
ftypes[5] = 'text';
}(jQuery));
var $mcj = jQuery.noConflict(true);
</script>
<!--End mc_embed_signup-->
</div>
<div class="modal-footer">
<button type="button" class="btn btn-outline-info" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
</body>
</html>这是一个ES6速记替代方案：
const subjectInputGroup = $('#mce-other-subject').closest('.mc-field-group').hide();
$('#mce-MMERGE3').on('change', e => subjectInputGroup[
$('option:selected', e.target).attr('id') == 'tenth-choice' ? 'show' : 'hide'
]());
推荐阅读
- javascript - 有没有办法通过 col-sm 知道用户是否在使用类似于 flexbox 的小型设备？
- powershell - 如何通过 PowerShell 打开 Visual Studio Code 并在启动 VSCode 后立即关闭 PowerShell？
- laravel - 如何在 laravel 中为经过身份验证或未经身份验证的用户创建单个端点？
- google-apps-script - 将各种数据格式传递到 Google 表格图表
- vuejs2 - 如何动态设置类名？
- javascript - 创建带参数的 Promise
- java - 当从另一个类调用使用它的方法时，为什么自动装配对象为空？
- button - 角度日期选择器未显示在 mat-menu 中
- swift - 在 Swift 中使用 available
- python - 无法使用 pip install spacy 安装 spacy