обработчик события click для идентификатора, который не отвечает (или, по крайней мере, я так думаю) - PullRequest
Новая
       2

обработчик события click для идентификатора, который не отвечает (или, по крайней мере, я так думаю)

0 голосов
/ 13 января 2019

Я создал модуль всплывающих кнопок с помощью 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">&times;</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">&nbsp;<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">&nbsp;</label>
                  <input type="text" value="" name="FNAME" class="" id="mce-FNAME" placeholder="First Name">
                </div>
                <div class="mc-field-group">
                  <label for="mce-LNAME">&nbsp;</label>
                  <input type="text" value="" name="LNAME" class="" id="mce-LNAME" placeholder="Last Name">
                </div>

                <div class="mc-field-group">
                  <label for="mce-Link">&nbsp;</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">&nbsp;</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">&nbsp;</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">&nbsp;</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">&nbsp;&nbsp;&nbsp;html</label></li>
                    <li><input type="radio" value="text" name="EMAILTYPE" id="mce-EMAILTYPE-1"><label for="mce-EMAILTYPE-1">&nbsp;&nbsp;&nbsp;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>

ссылка на образ консоли и клиентской части

Ответы [ 2 ]

0 голосов
/ 13 января 2019

Вам не нужно прислушиваться к щелчку на опции 10 вашего списка. Что вам нужно сделать, это прослушать событие onChange тега select и сравнить значение с параметром, для которого вы хотите задать видимость ввода, в вашем случае «Десятый выбор».

Если сравнение верно, вы сможете изменить видимость по своему желанию. давайте посмотрим на этот пример: 

$('#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">&nbsp;</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">&nbsp;</label>
    <input type="text" value="" name="other-subject" class="" placeholder="RE: ( alt: Custom subject )">
  </div>
</div>
0 голосов
/ 13 января 2019

Эта функция необходима для переключения группы полей ввода пользовательских тем: 

$(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">&times;</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">&nbsp;<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">&nbsp;</label>
                  <input type="text" value="" name="FNAME" class="" id="mce-FNAME" placeholder="First Name">
                </div>
                <div class="mc-field-group">
                  <label for="mce-LNAME">&nbsp;</label>
                  <input type="text" value="" name="LNAME" class="" id="mce-LNAME" placeholder="Last Name">
                </div>

                <div class="mc-field-group">
                  <label for="mce-Link">&nbsp;</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">&nbsp;</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">&nbsp;</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">&nbsp;</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">&nbsp;&nbsp;&nbsp;html</label></li>
                    <li><input type="radio" value="text" name="EMAILTYPE" id="mce-EMAILTYPE-1"><label for="mce-EMAILTYPE-1">&nbsp;&nbsp;&nbsp;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'
]());
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...