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

Question

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

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

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

因此，只有在移动设备上才能删除所有 9 个 HTML。

我已经在网站上包含了以下 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 的片段仍然出现在移动设备上。 我知道对于这个特定目标可能有一个非常简单的解决方案。 但是在互联网上搜索了两天后，我遇到了很多不同的选择，这实际上让我更加困惑。

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

Answer 1

在第一种方法中，当页面width发生变化时，通过控制页面width ，使用 jQuery 隐藏或显示div.price-list__item-desc元素。

在您开发的方法中，没有运行匿名function以在页面更改时隐藏项目； 您需要使用事件处理程序方法。 在我开发的结构中，页面宽度变化时会影响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>

Answer 2

没有什么可以调用您的 function。 改用媒体查询。

更新：我添加了一些js来解决你的问题。 如果您试图隐藏（因此 div 仍然占用空间但不显示任何内容），那么您的问题实际上没有任何意义。 如果要删除 div，请将 display 设置为 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>