我已经使用Bootstrap构建了一个弹出按钮模块，目的是将其添加到我的每个产品页面中。下面列出了我遇到的障碍。
*这是我在这里的第一篇文章，因此，如果有任何不必要的文章或我如何设置格式，问题应该有所不同，请告诉我。
问题是我设置了一个下拉列表，以允许站点的用户选择其电子邮件信息请求的主题。另一个选项向我提出了一个问题，我是否应该删除下拉列表并提供文本以供用户填写，以使其最适合他们的进化需求。
我无法在控制台中找到响应（以我的技术能力），因此我知道如何将其分配为消失并在选择“其他”选项时允许其他字段显示。我附有两个变体，希望能使其中一个起作用，但没有成功。请指教。
谢谢！ J
//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>
答案 0 :(得分：0)
这是您需要切换自定义主题输入字段组的功能：
$(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'
]());
答案 1 :(得分：0)
您实际上不需要收听列表中选项10的单击。您需要做的是侦听select标记的onChange事件，并将该值与您想要限制输入可见性的选项进行比较，在这种情况下为“第十选择”。
如果比较结果正确，则可以根据需要更改可见性。让我们看一下这个例子：
$('#mce-MMERGE3').on("change", function (e) {
if (e.target.value == "Tenth Choice") {
$('#mce-MMERGE3').hide();
$('#mce-other-subject').show();
}
});.mce-other-subject {
display:none;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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">Other</option>
</select>
<div class="mc-field-group mce-other-subject" id="mce-other-subject">
<label for="mce-other-subject"> </label>
<input type="text" value="" name="other-subject" class="" placeholder="RE: ( alt: Custom subject )">
</div>
</div>