Javascript 使用jQuery添加显示：无；当某件事是真的并且达到一定的规模时？

我想将代码中名为text的div改为diplay:none；只要div“#视频覆盖阴影和#视频覆盖”为真，并且当屏幕大小为740时，高于740时，以及低于460时，什么也不做。我从以下几点开始：

$(document).ready(function(){ window
var $window = $(window);

//display nav
var displayHide = true;

//on resize get widths
getWidths();
$window.resize(getWidths);

//set width of content to the needed widths
function getWidths()
{
    var browserWidth = $window.width();

    if ((browserWidth >=740) && (("#video-overlay-shadow, #video-overlay") == true))
    {
        //do somthing

    }
    else if((browserWidth >= 460) && (("#video-overlay-shadow, #video-overlay") == false))
    {
        //do something
    }
    else if((browserWidth < 740) && (("#video-overlay-shadow, #video-overlay") == false))
    {
        //do something
    }
}
//toggle nav
function toggleHide()
{
    $("#text").toggle();

}});

$（文档）.ready（函数（）{window
变量$window=$（window）；
//显示导航
var displayHide=true；
//关于调整获取宽度的大小
getWidths（）；
$window.resize（getWidths）；
//将内容的宽度设置为所需的宽度
函数getWidths（）
{
var browserWidth=$window.width（）；
如果（（浏览器宽度>=740）和（“#视频覆盖阴影，#视频覆盖”）==true））
{
//干坏事
}
否则如果（（浏览器宽度>=460）和（“#视频覆盖阴影，#视频覆盖”）==false））
{
//做点什么
}
否则，如果（（浏览器宽度<740）和（“#视频覆盖阴影，#视频覆盖”）==false））
{
//做点什么
}
}
//切换导航
函数toggleHide（）
{
$（“#文本”）.toggle（）；
}});

我想知道我是否在正确的轨道上，或者有人能看到代码中的错误吗？我无法使用媒体查询的原因是我需要确保“#视频覆盖阴影和#视频覆盖”=true

因此，在我尝试这一点之前，我只想补充一下：

$(document).ready(function() {

var $window = $(window);

//display nav
var displayHide = true;

//on resize get widths
getWidths();
$window.resize(getWidths);

//set width of content to the needed widths
function getWidths()
{
    var browserWidth = $window.width();
    if(($("#video-overlay-shadow").length > 0) && ($(browserWidth >=740)))
                    {$("#hero-bg").css("display", "none");
                    }
                        else if(($("#video-overlay-shadow").length > 0) && ($(browserWidth <740)))
                        {
                        //do nothing
                        }

                        else if(($("#video-overlay-shadow").length > 0) && ($(browserWidth >=460)))//it exists
                        {
                            //do nothing
                        }
                        else if(($("#video-overlay-shadow").length <=0))
                        {
                        //do nothing
                        }
}});

$（文档）.ready（函数（）{
变量$window=$（window）；
//显示导航
var displayHide=true；
//关于调整获取宽度的大小
getWidths（）；
$window.resize（getWidths）；
//将内容的宽度设置为所需的宽度
函数getWidths（）
{
var browserWidth=$window.width（）；
如果（$（“#视频覆盖阴影”）.length>0）和（$（browserWidth>=740）））
{$（“#英雄背景”）.css（“显示”、“无”）；
}
否则如果（$（“#视频覆盖阴影”）.length>0）和（$（browserWidth 0）和（$（browserWidth>=460））//它存在
{
//无所事事
}
else if（$（“#视频覆盖阴影”）.length您缺少两个覆盖元素的
$
。当前您只是测试一个字符串，这不是您想要的。假设覆盖只是输入，您需要：

$("#video-overlay-shadow").val() == true && $("#video-overlay").val() == true;

如果未在其中存储任何其他真实值，可以将其简化为：

$（“#视频覆盖阴影”）.val（）&&$（“#视频覆盖”）.val（）；

此外，我会将此值存储在一个变量中，而不是每次都查询它。
如果
#video overlay==true，则不能只询问JavaScript。要测试jQuery中是否存在元素，请查找其长度：

if ($('#video-overlay').length) {  // if no such div, length = zero = false

要测试元素是否可见，请使用该选择器：

if ($('#video-overlay:visible').length) { 

我不知道你在这里想做什么，但我会用herre来检查元素是否存在

简单地说：


不是

由于您使用的是jquery对象，而不是纯JavaScript，所以它应该包含在$

if((browserWidth < 740) && $("#video-overlay-shadow").val() && $("#video-overlay").val()){}

if（（浏览器宽度<740）和&$（“#视频覆盖阴影”）.val（）和&$（“#视频覆盖”）.val（）{

所以我希望这更接近你想要的，但是更多的细节会很有用
为什么不能使用响应式网页设计？
在css文件中：

/* start css */

// some styles for all devices with max-width 460px

@media (min-width: 460px) and (max-width: 740px) {
  #video-overlay-shadow, #video-overlay {
    display: none;
  }
}

@media (min-width: 740px) {
  #video-overlay-shadow, #video-overlay {
    display: block;
  }
}

/* end css */

你说的
#video overlay==true是什么意思？你想测试该元素的存在吗？是的，我想确保它显示在页面上。我的页面上有一个按钮，当你点击它时，它会将#video overlay shadow，#video overlay覆盖在一个横幅上，横幅上有两张图片。调整页面大小时，它看起来很像在你到达740-460之前，一切都很顺利，所以当它到达那里时，我想确保当显示视频叠加阴影时，视频叠加正在显示，并且你的at 740-460设置对标题中的一幅图片的名称文本不显示任何内容。
$（'video overlay shadow'）
将始终为
true
，即使它是空的——您需要测试jQuery对象的长度如果没有元素，则.length evaulate为false，否则返回一个未定义的对象并计算为true检查主要问题的新注释。您还有什么问题？您是否能够取得任何进展？使用新代码，它现在的设置始终显示：无。
if((browserWidth < 740) && $("#video-overlay-shadow").val() && $("#video-overlay").val()){}

/* start css */

// some styles for all devices with max-width 460px

@media (min-width: 460px) and (max-width: 740px) {
  #video-overlay-shadow, #video-overlay {
    display: none;
  }
}

@media (min-width: 740px) {
  #video-overlay-shadow, #video-overlay {
    display: block;
  }
}

/* end css */