Question

我想将名为text的代码中的div更改为diplay：none;只要div“＃video-overlay-shadow和＃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
                        }
}});

但它仍然没有任何想法？就像它在代码中所说的那样，当视频叠加阴影存在且屏幕大小为740-460时，我希望显示：＃hero-bg上没有，否则什么都不做。它现在只是设置display：none;一直在＃hero-bg上。

Answer 1

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

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

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

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

Answer 2

不确定你在这里尝试做什么 - 但是我会做些什么来检查元素是否存在

简单地：

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

不

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

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

中

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

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

Answer 3

为什么使用响应式网页设计无法完成？在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 4

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

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

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

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

此外，我会将此值存储在变量中，而不是每次都查询它。

使用jQuery添加display：none;什么东西是真的，在一定的大小？

4 个答案: