jQuery 使用 removeClass("hidden") 显示/隐藏 div
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/23520461/
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
using removeClass("hidden") to show/hide a div
提问by user3589485
I am creating an interactive game using HTML, CSS and jQuery. On the bottom right hand corner there is a question mark (an image file, not text). What I am trying to make happen is when the question mark is clicked on and held down , a box shows up with help on it. When the mouse is released the box dissapears. There are three different help boxes for 3 different pages.
我正在使用 HTML、CSS 和 jQuery 创建一个交互式游戏。右下角有一个问号（图像文件，不是文本）。我想要实现的是当问号被点击并按住时，会出现一个带有帮助的框。当鼠标被释放时，盒子消失了。三个不同的页面有三个不同的帮助框。
help is the question mark image
帮助是问号图像
.help-box refers to all the boxes from different pages .growing-plants & .label-flower & .types-animal are the different help boxes. This is my code :
.help-box 指的是来自不同页面的所有框。 .growth-plants & .label-flower & .types-animal 是不同的帮助框。这是我的代码：
script.js file:
script.js 文件：
$('#help').mousedown(function() {
if (currentSection == 1) {
$('.growing-plants').removeClass("hidden");
} else if (currentSection == 2) {
$('.label-flower').removeClass("hidden");
} else if (currentSection == 3) {
$('.types-animal').removeClass("hidden");
}
});
$('#help').mouseup(function() {
if (currentSection == 1) {
$('.growing-plants').addClass("hidden");
} else if (currentSection == 2) {
$('.label-flower').addClass("hidden");
} else if (currentSection == 3) {
$('.types-animal').addClass("hidden");
}
});
});
style.css file:
style.css 文件：
#help {
position: absolute;
left:900px;
}
.help-box {
position: absolute;
top: 200px;
left: 220px;
z-index: 15;
}
.growing-plants {
overflow: hidden;
}
.label-flower {
overflow: hidden;
}
.types-animal {
overflow: hidden;
}
html file:
html文件：
<img src="images/help-growing-plants.png" class="help-box growing-plants" alt="help" width="600" height="400">
<img src="images/help-label-flower.png" class="help-box label-flower" alt="help" width="600" height="400">
<img src="images/help-types-animal.png" class="help-box label-flower" alt="help" width="600" height="400">
Any help or suggestions would be so appreciated!!!!
任何帮助或建议将不胜感激！！！！
回答by andleer
You need to initially hide your elements by styling them with display: none;
您需要首先通过样式来隐藏您的元素 display: none;
.help-box {
position: absolute;
top: 200px;
left: 220px;
z-index: 15;
display: none;
}
Then you can use jQuery .show()and .hide()
然后你可以使用jQuery.show()和.hide()
$('#help').mousedown(function() {
if (currentSection == 1) {
$('.growing-plants').show();
} else if (currentSection == 2) {
$('.label-flower').show();
} else if (currentSection == 3) {
$('.types-animal').show();
}
});
$('#help').mouseup(function() {
if (currentSection == 1) {
$('.growing-plants').hide();
} else if (currentSection == 2) {
$('.label-flower').hide();
} else if (currentSection == 3) {
$('.types-animal').hide();
}
回答by Liv MacIntosh
Unless your "hidden" class is defined in a part of the code that you are not linking the problem is that using the .addClass(classNameYouWantToAdd)or .removeClass(classNameYouWantToAdd)is looking for a "hidden" class that you haven't defined.
除非您的“隐藏”类是在您没有链接的代码的一部分中定义的，否则问题在于使用.addClass(classNameYouWantToAdd)or.removeClass(classNameYouWantToAdd)正在寻找您尚未定义的“隐藏”类。
The rest of your code should work if you defined a class that you then apply to the div containing what you want to hide like this
如果您定义了一个类，然后将其应用于包含您想要隐藏的内容的 div，则其余代码应该可以工作
.hidden {
visibility:hidden;
}
