javascript 使用 jquery 为 backgroundImage 隐藏或显示 none
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/25439145/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Hide or display none for backgroundImage using jquery
提问by user171717
$('.arrow').backgroundImage="url('../img/arrow.png').style.display = 'none'";
$('.arrow').backgroundImage="url('../img/arrow.png').style.display = 'none'";
I am using an animate.css plugin to hide the down arrow on scroll down.
我正在使用 animate.css 插件来隐藏向下滚动时的向下箭头。
`$( document ).ready(function() {?
console.log( "ready!" );?
$("h1").animate({color:"#ffffff"}, 600);
$('.arrow').backgroundImage="url('../img/arrow.png')";`
if (direction == "up") {
$("h1").animate({color:"#ffffff"}, 600);
$('.arrow').backgroundImage="url('../img/arrow.png')";
} else if (direction == "down") {?
$("h1").animate({color:"#444444"}, 600);
$('.arrow').backgroundImage="url('../img/arrow.png').style.display = 'none'";
} else if (direction == "down") {?
$("h1").animate({color:"#444444"}, 600);
$('.arrow').backgroundImage="url('../img/arrow.png').style.display = 'none'";
The arrow isn't working. Is my function written incorrectly? How do I hide backgroundImage? Is there a better/efficient way to work around this?
箭头不起作用。我的函数写错了吗？如何隐藏背景图像？有没有更好/有效的方法来解决这个问题？
回答by Tanzeel Kazi
A clean way to do the show and hide would be to use CSS classes to override the background-imageproperty.
显示和隐藏的一种简洁方法是使用 CSS 类来覆盖该background-image属性。
Assuming the following CSS class selector is already defined:
假设已经定义了以下 CSS 类选择器：
.arrow {
background-image: url("../img/arrow.png");
}
Add another CSS class selector definition:
添加另一个 CSS 类选择器定义：
.arrow.hide-bg {
background-image: none;
}
Update your JS code portion to add or remove the CSS class accordingly:
更新您的 JS 代码部分以相应地添加或删除 CSS 类：
if (direction == "up") {
$("h1").animate({color:"#ffffff"}, 600);
$('.arrow').removeClass("hide-bg");
} else if (direction == "down") {
$("h1").animate({color:"#444444"}, 600);
$('.arrow').addClass("hide-bg");
}
回答by V31
You can hide the image using the hide() function
您可以使用 hide() 函数隐藏图像
$('.arrow').hide();
To set the background you can make use of the .css function of jquery like:
要设置背景，您可以使用 jquery 的 .css 函数，例如：
$('.arrow').css("background","url('../img/arrow.png')");
回答by Sameera Thilakasiri
Try this, hope it works for you.
试试这个，希望它对你有用。
if (direction == "up") {
$('.arrow').css('background-image','../img/arrow.png'); }
else if (direction == "down") {
$('.arrow').css('background-image','none');
}
回答by Jase
I give you another posible solution.
我给你另一个可能的解决方案。
$('.arrow').css('display', 'none');
But it's more common to do:
但更常见的做法是：
$('.arrow').hide();
