Javascript 当多个项目包含所述类时，jQuery 按类显示/隐藏
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1931352/
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
jQuery Show/Hide by class when multiple items contain the said class
提问by Ben Stewart
Thanks in advance for helping me out (for those who have time and are willing).
预先感谢您帮助我（对于那些有时间并愿意的人）。
I've written this script:
我写了这个脚本：
$(document).ready(function() {
// hides the slickbox as soon as the DOM is ready
// (a little sooner than page load)
$('.foliobtn').hide();
$('.folionamedate').show();
// shows the slickbox on clicking the noted link
$('.foliobottom').mouseover(function() {
$('.foliobtn').show();
return false;
});
$('.foliobottom').mouseout(function() {
$('.foliobtn').hide();
return false;
});
$('.foliobottom').mouseover(function() {
$('.folionamedate').hide();
return false;
});
$('.foliobottom').mouseout(function() {
$('.folionamedate').show();
return false;
});
});
and put it onto this page http://www.fraservalley-webdesign.com/portfolio/test.php.
并把它放到这个页面http://www.fraservalley-webdesign.com/portfolio/test.php。
It works except it of course shows/hides on every element with the appropriate classes, not just the one I'm hovering over. I can't uniquely name each one as there will be dozens and it will be database driven content.
它的工作原理当然是使用适当的类在每个元素上显示/隐藏，而不仅仅是我悬停的那个。我不能唯一地命名每一个，因为会有几十个并且它将是数据库驱动的内容。
Does anyone know a simple way to isolate the item I'm hovering over within the script?
有谁知道一种简单的方法来隔离我在脚本中悬停的项目？
Does this make sense?
这有意义吗？
回答by Rich
The variable "this" is bound to the triggering element in the mouseover and mouseout handlers, so you can say something like
变量“this”绑定到 mouseover 和 mouseout 处理程序中的触发元素，因此您可以这样说
$('.foliobtn',this).hide();
to hide the elements with class "foliobtn" inside the triggering element.
在触发元素中隐藏类“foliobtn”的元素。
回答by JP Silvashy
You can use another function as a callback, this would effectively act as a toggle of sorts, and make your code simpler.
您可以使用另一个函数作为回调，这将有效地充当各种切换，并使您的代码更简单。
Give this a shot:
试一试：
$(document).ready(function() {
// hides the slickbox as soon as the DOM is ready
// (a little sooner than page load)
$('.foliobtn').hide();
$('.folionamedate').show();
// shows the slickbox on clicking the noted link
$('.foliobottom').hover(function() {
$(this).find('.foliobtn').show();
}, function() {
$(this).find('.foliobtn').hide();
});
});
You also don't need to return falsein this case because the browser has no default behavior for this element.
return false在这种情况下，您也不需要这样做，因为浏览器没有此元素的默认行为。
return falseis more appropriate for something like clickfor an <a>or a form submit, but really you'd probably want to use preventDefault()instead.
return false更适合于诸如clickan<a>或 form submit 之类的东西，但实际上您可能想要使用它preventDefault()。
回答by Paul D. Waite
Could you try this?
你能试试这个吗？
$(document).ready(function() {
// hides the slickbox as soon as the DOM is ready
// (a little sooner than page load)
$('.foliobtn').hide();
$('.folionamedate').show();
// shows the slickbox on clicking the noted link
$('.foliobottom').mouseover(function() { $(this).show(); return false; });
$('.foliobottom').mouseout(function() { $(this).hide(); return false; });
回答by Sander Rijken
You should use the jquery bind method:
您应该使用 jquery绑定方法：
Something like
就像是
$(document).ready(function() {
// hides the slickbox as soon as the DOM is ready
// (a little sooner than page load)
$('.foliobtn').hide();
$('.folionamedate').show();
// shows the slickbox on clicking the noted link
$('.foliobottom').mouseover(function(e) {
$(this).find('.foliobtn').show();
$(this).find('.folionamedate').hide();
});
$('.foliobottom').mouseout(function(e) {
$(this).find('.foliobtn').hide();
$(this).find('.folionamedate').show();
});
});
Here you don't change visibility of all elements based on the class, but find an element using this class, and the current node
在这里你不改变基于类的所有元素的可见性，而是找到一个使用这个类的元素，以及当前节点
