javascript - 为什么我的 JavaScript 不会根据选择隐藏/显示图像？

Question

这是我的代码。我正在预加载图像并希望默认情况下隐藏它们，当选择该选项时我希望显示图像。为什么这不起作用？

我尝试过研究 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>