Question

我有一个带有选项的选择和一个js，当我转到所有选项时，它们可以隐藏和显示id和value之后的内容，代码可以正常工作。当我再次选择名称为“ brands name”的选项时。我什么也没看到。

Answer 1

您需要采取一些步骤来解决此问题：

为选项<option value="showen">Name of the brands</option>
添加新功能toggleContent用于切换内容。
在脚本末尾添加toggleContent($("#dropdown").val());。该代码应在页面初始化后显示内容。

$(document).ready(function() {
  function toggleContent(val) {
    $('.loader').fadeIn();
    $(".video").hide();
    $(".showss").hide();
    $("#" + val).hide();
    setTimeout(function() {
      $('.loader').fadeOut();
      $("#" + val).show();
    }, 1500);

  }
  $("#dropdown").change(function() {
    var val = $(this).val();
    toggleContent(val)
  });

  toggleContent($("#dropdown").val());
});

body {
      background-color: #000;
    }
    
    .loader {
      border: 10px solid #fff;
      /* Light grey */
      border-top: 10px solid #3498db;
      /* Blue */
      border-radius: 50%;
      width: 80px;
      height: 80px;
      animation: spin 2s linear infinite;
      position: absolute;
      top: 48%;
      left: 48%;
      display: none;
    }
    
    @keyframes spin {
      0% {
        transform: rotate(0deg);
      }
      100% {
        transform: rotate(360deg);
      }
    }
    
    @media screen and (max-width: 475px) {
      .loader-video {
        border: 8px solid #fff;
        /* Light grey */
        border-top: 8px solid #3498db;
        /* Blue */
        border-radius: 50%;
        width: 60px;
        height: 60px;
        top: 48%;
        left: 48%;
      }
    }
    
    @media screen and (max-width: 384px) {
      .loader {
        border: 8px solid #fff;
        /* Light grey */
        border-top: 8px solid #3498db;
        /* Blue */
        border-radius: 50%;
        width: 50px;
        height: 50px;
        top: 48%;
        left: 48%;
      }
    }
    
    @media screen and (max-width: 320px) {
      .loader {
        border: 8px solid #fff;
        /* Light grey */
        border-top: 8px solid #3498db;
        /* Blue */
        border-radius: 50%;
        width: 50px;
        height: 50px;
        top: 48%;
        left: 48%;
      }
    }

  <div class="container">
    <div class="form-group container">
      <select class="form-control" id="dropdown">
        <option value="showen">Name of the brands</option>
        <option value="carsvideo1">Acura</option>
        <option value="carsvideo2">Abarth</option>
        <option value="carsvideo3">Alfa Romeo</option>
        <option value="carsvideo4">Audi</option>
      </select>
    </div>
  </div>
  <div class="container text-center">
    <div class="loader"></div>
  </div>
  <div class="container">
    <h2 style="color:yellow;" class="showss text-center" id="showen">Main Content</h2>
  </div>
  <!--Hidden Content-->
  <div class="video" id="carsvideo1">
    <div class="container">
      <h2 class="text-center" style="color:red">Acura Video</h2>
    </div>
  </div>
  <div class="video" id="carsvideo2">
    <div class="container">
      <h2 class="text-center" style="color:blue">Abarth Video</h2>
    </div>
  </div>
  <div class="video" id="carsvideo3">
    <div class="container">
      <h2 class="text-center" style="color:green">Alfa Romeo Video</h2>
    </div>
  </div>
  <div class="video" id="carsvideo4">
    <div class="container">
      <h2 class="text-center" style="color:white">Audi Video</h2>
    </div>
  </div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 2

这是因为“品牌名称”选项没有价值，无法与您的JS代码关联。您需要为“品牌名称”选项分配一些值，如果未选择“品牌名称”，则需要（更改时）跟踪。如果是这样-请采取相应措施。没有您的代码，我不能说更多。

如何查看初始值。选择/选项

2 个答案: