1

我想将我的代码中名为 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 and #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 我想要 display:none 在#hero-bg 上，否则什么也不做。它现在只是设置 display:none; 一直在#hero-bg 上。

4

4 回答 4

1

为什么不能使用响应式网页设计来完成？在 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 */
于 2013-01-16T17:20:19.713 回答
1

你不能只问 JavaScript 是否#video-overlay==true. 要在 jQuery 中测试元素是否存在，请找到它的长度：

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

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

if ($('#video-overlay:visible').length) {
于 2013-01-16T17:05:18.607 回答
1

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

简单地：

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

不是

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

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

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

所以我希望那更接近您的需求，但更多细节会很有用

于 2013-01-16T17:11:09.397 回答
0

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

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

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

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

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

于 2013-01-16T17:04:55.803 回答