HTML5-使用jQuery方法隐藏和显示html元素不是'；不行吗？

$（文档）.ready（函数（）{
变量宽度=$（窗口）.width（）；
如果（宽度<768）{
$（“视频”）.hide（）；
$（“.hero img”）.show（）；
}否则{
$（“.hero img”）.hide（）；
$（“视频”）.show（）；
}
});
这是JQuery
$（window.width（）
的一个简单隐藏/显示示例，请在此示例中尝试您的代码片段，并让我知道它是否有效。最好是从下面获得代码，并在自己的计算机上试用，因为它与窗口大小有关


.绿色，.红色{
填充：30px；
宽度：100px；
保证金：30像素自动；
}
.green{背景：绿色；}
.red{背景：red；}
$（文档）.ready（函数（）{
如果（$（窗口）.width（）>767）{
$（“.green”）.hide（）；
}
如果（$（窗口）.width（）<768）{
$（“.red”）.hide（）；
}
});
hero是html中的一个id，但您在JQueryal中将其用作一个类，因此您的代码只在页面加载时运行，也应该在视口宽度更改时运行。您也可以通过媒体查询来执行此操作。@Tanim yes my bad，但视频元素仍然不隐藏/showUse CSS:
@media（最大宽度：767.98px）{video{display:none}#hero img{display:none；}video{display:block}#hero img{display:inline block}
@HereticMonkey它可以工作，但是，这是否意味着在浏览网站时会同时加载图像和视频，或者根据屏幕大小只加载其中一个？
<header class="masthead">
  <div id="hero">
    <div class="green"></div>
    <div class="red"></div>
  </div>
</header>

<style>
 .green, .red {
   padding: 30px;
   width: 100px;
   margin: 30px auto;
 }
 .green {background: green;}
 .red {background: red;}
</style>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
  $(document).ready(function () {
      if ($(window).width() > 767) {
        $(".green").hide();
      }
      if ($(window).width() < 768) {
        $(".red").hide();
      }
  });
</script>