使用jQuery添加显示:none;当某件事是真实的,并且有一定的规模
Using jQuery adding display:none; when something is true and at a certain size?
我想改变我的代码中的div名为text显示:none;只要div"#video-overlay-shadow"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上。
不知道你在这里想做什么-但这里是我要做的检查元素是否存在
:
$('#video-overlay-shadow').val()
不(("#video-overlay-shadow, #video-overlay") == false)
作为你使用的jquery对象,而不是纯JavaScript,所以它应该包含在$
if((browserWidth < 740) && $("#video-overlay-shadow").val() && $("#video-overlay").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 */
你不能只问JavaScript如果#video-overlay==true
。要测试jQuery中是否存在一个元素,请查找其长度:
if ($('#video-overlay').length) { // if no such div, length = zero = false
要测试一个元素是否可见,使用选择器:
if ($('#video-overlay:visible').length) {
您缺少两个重叠元素的$
。目前你只是在测试一个字符串,这不是你想要的。假设叠加只是输入,您需要:
$("#video-overlay-shadow").val() == true && $("#video-overlay").val() == true;
如果不存储其他真值,可以简化为:
$("#video-overlay-shadow").val() && $("#video-overlay").val();
此外,我将把这个值存储在一个变量中,而不是每次都查询。
- 从桌面读取python文件时高亮显示代码
- 使用JS如何动态更改显示的html文件中的文本背景颜色
- 如何在生成下载文件时显示加载动画
- React重新渲染但未显示正确的组件
- nodejs-expressjs上传图像并显示它们
- 使用JSP从服务器检索和显示图像
- 音频控件在mouseover上显示,在mouseout上淡出
- 让文本输入幻灯片显示输入时的新文本输入?然后向后滑动
- 使用电话间隙在Android应用程序中显示SQL Lite的数据
- 显示5秒后隐藏潜水
- 画廊图像未显示
- 不显示带有本地json文件数据的谷歌地图脚本
- 如何将json数据显示为html
- 谷歌地图不是以HTML显示,而是在JS Fiddle上工作
- Windows8应用程序(html&Javascript):从图片库(除了文件选择器)显示图像的另一种方式
- 高亮显示时编辑文本大小和颜色
- 有时数据是't显示在浏览器中
- 地理图表:使用 ISO 3266-2 区域代码,但显示真实姓名
- 如何在鼠标悬停时显示中间重定向链接的真实目标
- 使用jQuery添加显示:none;当某件事是真实的,并且有一定的规模