使用jQuery添加显示:none;当某件事是真实的，并且有一定的规模

Question

我想改变我的代码中的div名为text显示:none;只要div"#video-overlay-shadow"one_answers"#video-overlay"为真，当屏幕尺寸为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();
}});

我想知道我是否在正确的轨道上，或者有人能看到代码中的错误吗?我不能使用媒体查询的原因是我需要确保"#video-overlay-shadow和#video-overlay"= 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
                        }
}});

但它仍然不起作用，有什么想法吗?正如代码中所说，当video-overlay-shadow存在并且屏幕尺寸为740-460时，我想要显示:#hero-bg上没有显示，否则什么都不做。现在只是设置display:none;一直在#hero-bg上。

Answer 1

不知道你在这里想做什么-但这里是我要做的检查元素是否存在

:

---

$('#video-overlay-shadow').val()

不

(("#video-overlay-shadow, #video-overlay") == false)

作为你使用的jquery对象，而不是纯JavaScript，所以它应该包含在$

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

所以我希望这更接近你所寻找的，但更多的细节将是有用的

Answer 2

为什么不能使用响应式网页设计?在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 */

Answer 3

你不能只问JavaScript如果#video-overlay==true。要测试jQuery中是否存在一个元素，请查找其长度:

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

要测试一个元素是否可见，使用选择器:

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

Answer 4

您缺少两个重叠元素的$。目前你只是在测试一个字符串，这不是你想要的。假设叠加只是输入，您需要:

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

如果不存储其他真值，可以简化为:

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

此外，我将把这个值存储在一个变量中，而不是每次都查询。