如果屏幕小于 767 像素 (jQuery)，则隐藏特定的 HTML 元素

Question

在我的一个网站上，如果屏幕小于 767 像素（在移动设备上），我想删除特定的 HTML 元素。

下面的HTML在页面上被使用了9次：

<div class="price-list__item-desc">&nbsp;</div>

因此 HTML 的全部 9 部分必须仅在移动设备上删除。

我已经在网站上包含了以下 jQuery 文件：

jQuery(function ($) {
    if (window.matchMedia('(max-width: 767px)').matches) {
        $('<div class="price-list__item-desc">&nbsp;</div>').hide();
    }
    else {
        $('<div class="price-list__item-desc">&nbsp;</div>').show();
    }
});

但是，代码不起作用，HTML 的片段仍然显示在移动设备上。我知道这个特定的 objective 可能有一个非常简单的修复方法。但是在网上搜索了两天后，我遇到了这么多不同的选择，实际上让我更加困惑。

非常感谢任何帮助，在此先感谢！

Answer 1

没有任何东西调用你的函数。请改用媒体查询。

更新：我添加了一些 js 来解决您的问题。如果你想隐藏（所以 div 仍然占用 space 但没有显示任何东西）那么你的问题就没有意义。如果要删除 div，则将显示设置为 none。 js用来抓取你想要的div

let divs = document.getElementsByClassName('price-list__item-desc')
for(let i = 0; i < divs.length; i++){
 
   if (divs[i].innerHTML == "&nbsp;")divs[i].classList.add('hide')
}

@media (max-width: 767px) { 

.hide{
display:none;}
}

<div class="price-list__item-desc">&nbsp;</div>
<div class="price-list__item-desc">&nbsp;</div>
<div class="price-list__item-desc">&nbsp;</div>
<div class="price-list__item-desc">&nbsp;</div>
<div class="price-list__item-desc">&nbsp;</div>
<div class="price-list__item-desc">6</div>
<div class="price-list__item-desc">7</div>
<div class="price-list__item-desc">8</div>
<div class="price-list__item-desc">9</div>

Answer 2

第一种方法，当页面width改变时，通过控制页面width.[=17]使用jQuery隐藏或显示div.price-list__item-desc元素=]

在您开发的方法中，匿名函数不是运行在页面变化时隐藏项目；您需要使用事件处理程序方法。在我开发的结构中， onresize 事件在页面宽度变化时受到影响。这样我就可以在页面宽度变化时捕捉到这个事件。

$( document ).ready(function() {
  window.onresize = function() {  
    console.log(`Width: ${$( window ).width()}`);
    var divs = document.querySelectorAll("div.price-list__item-desc");
    
    if (window.matchMedia('(max-width: 767px)').matches)
    {
        $('div.price-list__item-desc').removeClass("active");
      
        for (var i = 0; i < divs.length; i++) 
        {
          if(divs[i].innerHTML === '&nbsp;')
            divs[i].style.display = "none";
          else
            divs[i].style.display = "block";
        }
    }
    else
    {
      $('div.price-list__item-desc').addClass("active");
    }
  }
  
  window.onresize();
});

div.price-list__item-desc {
  background-color: red;
  display: none;
}

.active{
  display: block !important;
}

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

<div class="price-list__item-desc">&nbsp;</div>
<div class="price-list__item-desc">1</div>
<div class="price-list__item-desc">&nbsp;</div>
<div class="price-list__item-desc">2</div>
<div class="price-list__item-desc">&nbsp;</div>

如果屏幕小于 767 像素 (jQuery)，则隐藏特定的 HTML 元素

Hide specific HTML element if screen is smaller than 767px (jQuery)

javascript

html

jquery

width

hide