为什么获胜't执行两个Jquery行

Why won't both Jquery lines execute?

本文关键字：两个 Jquery 执行 获胜 为什么      更新时间：2024-01-28

在下面的代码中，除了select之外的所有div都是要启动的"display:none"（在CSS中）。当有人从Select下拉列表中选择一个选项时，jquery会执行，但在"typeChosen（）"函数中，只有第一行执行（显示所有类为"always"的div）。查看类中是否有"size"，如果有，则显示类为"size"的所有div的代码没有执行。

基本上，如果选择了类中带有"size"的选项之一，那么底部的所有4个div都应该出现。如果选择了类中不带"size"的选项，则只显示前3个div。

我必须在Jquery中做一些不同的事情才能执行多行吗？我可能错了，但它似乎只是在做第一行并停下来。

    $(document).ready(function () {
    $("#typeofrequest").change(function () {
        typeChosen();
    });
    $( "#datepicker" ).datepicker();
});
function typeChosen() {
    $(".always").show();
    $('#typeofrequest').on( 'change', function( e ) {
      if( $(this).find('option:selected').hasClass("size") )
          $('div.size').show();
      else
          $('div.size').hide();
     });
}

        <form action="process-request.php" method="post">
  <select id="typeofrequest" name="type">
    <option value="">PLEASE SELECT</option>
    <option value="email" class="size">LOGsdfgdfgsdgdfgt</option>
    <option value="email" class="size">LOGO - Logo request</option>
    <option value="email" class="size">EMAIL - Graphic</option>
    <option value="social" class="size">SOCIAL MEDIA - Graphic</option>
    <option value="" class="size">LANDING PAGE - Graphic</option>
    <option value="" class="size">LANDING PAGE - Other</option>
    <option value="" class="size">EVENTS - Brochure</option>
    <option value="" class="size">EVENTS - Signage</option>
    <option value="" class="size">EVENTS - Other</option>
    <option value="print" class="size bleed">ADS - Print Ad</option>
    <option value="" class="size">ADS - Digital Ads for Corporate</option>
    <option value="" class="size">ADS - Digital Ads for Clients</option>
    <option value="" class="size">COLLATERAL - Sell Sheet</option>
    <option value="" class="size">COLLATERAL - Case Study</option>
    <option value="" class="size">COLLATERAL - Brochure/Booklet</option>
    <option value="" class="size">COLLATERAL - E-Book</option>
    <option value="">WEBSITES - Copy change</option>
    <option value="">WEBSITES - Add Press Release</option>
    <option value="">WEBSITES - Upload a document</option>
    <option value="" class="size">WEBSITES - Imagery change</option>
    <option value="">WEBSITES - New page(s)</option>
    <option value="">WEBSITES - Brand new website</option>
    <option value="">WEBSITES - Report an issue</option>
    <option value="">CULTURE -Shirt Design</option>
    <option value="">GENERAL QUESTION</option>  <!--this should NOT send email-to-case -->
    <option value="" class="size">Random/Miscellaneous graphic</option>
    <option value="">OTHER</option>
    <option value=""></option>
    <option value=""></option>
    <option value=""></option>
    <option value=""></option>
  </select>
  <br/>

  <div class="always"> Priority Level?
    <label for="priorityurgent">Urgent</label>
    <input type="radio" id="priorityurgent" name="priority" value="urgent" >
    <label for="priorityqueue">Put in queue</label>
    <input type="radio" id="priorityqueue" name="priority" value="queue" checked >
    </div>
  <div class="always">Due Date: <input type="text" id="datepicker" placeholder="Click to pop-up calendar">
  </div>
  <div class="always"> Enter any additional information about timing<br>
  <textarea rows="4" cols="50" placeholder="Enter additional info regarding timing..."></textarea>
  </div>
  <div class="size"> Size (w x h):
    <input type="text" id="size" name="size" placeholder="WxH" required />
  </div>

您的document.ready已经分配了事件，因此您的typeChosen不需要

function typeChosen(thisObj) {
    $(".always").show();
      if( $(thisObj).find('option:selected').hasClass("size") )
          $('div.size').show();
      else
          $('div.size').hide();
}
$(document).ready(function () {
    $("#typeofrequest").change(function () {
        typeChosen(this);
    });
    $( "#datepicker" ).datepicker();
});
相关文章：