为什么我的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

首先，此代码段未加载jQuery。仔细检查您的项目中是否包含它。

第二：ID应该是唯一的，但是您将像在一个类中一样在此代码中重复使用相同的ID。更改您的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>

Answer 2

您只是忘记了#上的$("#bmwlogo")选择器的.hide();

$(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>