为什么我的 javascript hide/show 图像不会基于选择？

Question

这是我的代码。 I am preloading the images and want them to be hidden by default, when the option is selected then I want the image to be displayed.为什么这行不通？

我已经尝试研究 Java 代码选项（我的知识很薄弱），这似乎是最有意义的，但是，它不起作用。

$(document).ready(function() {
  $('#vehiclemake').on('change', function() {
    if (this.value == 'BMW') {
      $("#bmwlogo").show();
    } else {
      $("bmwlogo").hide();
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="block-content">
  <div class="level">
    <select id="vehiclemake" class="ymm-select" name="_make">
      <option value="">-- Make --</option>
      <option value="BMW" selected="">BMW</option>
    </select>
  </div>
  <div class="level">
    <select id="vehiclemake" class="ymm-select" name="_model">
      <option value="">-- Model --</option>
      <option value="3-Series saloon (E21) 315 (1573 cm³, 75 PS)">3-Series saloon (E21) 315 (1573 cm³, 75 PS)</option>
    </select>
  </div>
  <div class="level">
    <select id="vehiclemake" class="ymm-select" name="_year">
      <option value="">-- Year --</option>
    </select>
  </div>

  <div class="ymm-clear">&nbsp;</div>

  <div class="ymm-extra" style="display:none">


    <div class="ymm-category-container">
      <div class="ymm-clear">&nbsp;</div>
    </div>



    <div class="ymm-search">

      <div class="ymm-or-search">
        Or search:
      </div>

      <form action="#">
        <table width="100%">
          <tbody>
            <tr>
              <td class="ymm-td-input" hidden="">
                <input class="input-text ymm-search-field" type="text" name="s" value="">
              </td>
              <td class="ymm-td-button" hidden="">
                <button type="submit" title="Search" class="button"><span><span>Search</span></span></button>
              </td>
            </tr>
          </tbody>
        </table>
      </form>
    </div>
  </div>

  <button type="button" title="Search" class="button ymm-submit-any-selection">Search</button>

</div>


<div id="vehicle_selector_selections">
  <img id="bmwlogo" src="https://placehold.it/150x150?text=BMW_LOGO">
  <p></p>
</div>

Answer 1

您刚刚在 .hide();

上忘记 $("#bmwlogo") 选择器的 #

$(document).ready(function() {
  $('#vehiclemake').on('change', function() {
    if (this.value == 'BMW') {
      $("#bmwlogo").show();
    } else {
      $("#bmwlogo").hide();
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="block-content">
  <div class="level">
    <select id="vehiclemake" class="ymm-select" name="_make">
      <option value="">-- Make --</option>
      <option value="BMW" selected="">BMW</option>
    </select>
  </div>
  <div class="level">
    <select id="vehiclemake" class="ymm-select" name="_model">
      <option value="">-- Model --</option>
      <option value="3-Series saloon (E21) 315 (1573 cm³, 75 PS)">3-Series saloon (E21) 315 (1573 cm³, 75 PS)</option>
    </select>
  </div>
  <div class="level">
    <select id="vehiclemake" class="ymm-select" name="_year">
      <option value="">-- Year --</option>
    </select>
  </div>

  <div class="ymm-clear">&nbsp;</div>

  <div class="ymm-extra" style="display:none">


    <div class="ymm-category-container">
      <div class="ymm-clear">&nbsp;</div>
    </div>



    <div class="ymm-search">

      <div class="ymm-or-search">
        Or search:
      </div>

      <form action="#">
        <table width="100%">
          <tbody>
            <tr>
              <td class="ymm-td-input" hidden="">
                <input class="input-text ymm-search-field" type="text" name="s" value="">
              </td>
              <td class="ymm-td-button" hidden="">
                <button type="submit" title="Search" class="button"><span><span>Search</span></span></button>
              </td>
            </tr>
          </tbody>
        </table>
      </form>
    </div>
  </div>

  <button type="button" title="Search" class="button ymm-submit-any-selection">Search</button>

</div>


<div id="vehicle_selector_selections">
  <img id="bmwlogo" src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcT3TH-PhVWOSxE2oNWSX4-7Byz90B_rAYtcY1yVWxnKtrI9HdqB">
  <p></p>
</div>

Answer 2

首先，jQuery 没有加载到这个片段中。仔细检查您是否已将其包含在您的项目中。

其次：ID 应该是唯一的，但是您在整个代码中重复使用相同的 ID，就像您使用 class 一样。更改您的 ID，使其独一无二。

第三种：使用 $(this).val() 作为获取值的 'jQuery' 方式。

第四：您在 $("#bmwlogo").hide();

上错过了选择器中的 #

$(document).ready(function() {
  $('#vehicleBrandSelect').on('change', function() {
    if ($(this).val() == 'BMW') {
      $("#bmwlogo").show();
    } else {
      $("#bmwlogo").hide();
    }
  });
});

#bmwlogo{
 display:none
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="block-content">
  <div class="level">
    <select id="vehicleBrandSelect" class="ymm-select" name="_make">
      <option value="" selected>-- Make --</option>
      <option value="BMW">BMW</option>
    </select>
  </div>
  <div class="level">
    <select id="vehiclemake" class="ymm-select" name="_model">
      <option value="">-- Model --</option>
      <option value="3-Series saloon (E21) 315 (1573 cm³, 75 PS)">3-Series saloon (E21) 315 (1573 cm³, 75 PS)</option>
    </select>
  </div>
  <div class="level">
    <select id="vehiclemake" class="ymm-select" name="_year">
      <option value="">-- Year --</option>
    </select>
  </div>

  <div class="ymm-clear">&nbsp;</div>

  <div class="ymm-extra" style="display:none">


    <div class="ymm-category-container">
      <div class="ymm-clear">&nbsp;</div>
    </div>



    <div class="ymm-search">

      <div class="ymm-or-search">
        Or search:
      </div>

      <form action="#">
        <table width="100%">
          <tbody>
            <tr>
              <td class="ymm-td-input" hidden="">
                <input class="input-text ymm-search-field" type="text" name="s" value="">
              </td>
              <td class="ymm-td-button" hidden="">
                <button type="submit" title="Search" class="button"><span><span>Search</span></span></button>
              </td>
            </tr>
          </tbody>
        </table>
      </form>
    </div>
  </div>

  <button type="button" title="Search" class="button ymm-submit-any-selection">Search</button>

</div>


<div id="vehicle_selector_selections">
  <img id="bmwlogo" src="https://via.placeholder.com/150">
  <p></p>
</div>

为什么我的 javascript hide/show 图像不会基于选择？

Why won't my javascript hide/show the image based on the make selection?

javascript

html-select