jQuery:单击1时淡出2个元素 [英] jQuery: fading out 2 elements, when 1 has been clicked
问题描述
我有一个PHP/PostgreSQL/Oracle脚本，它将链接显示为标签"，可以单击以仅显示与该标签"匹配的数据库记录.然后在每个标签"附近都有一个"X"，以便用户可以隐藏无趣的标签":
I have a PHP/PostgreSQL/Oracle-script which displays links as "tags", which can be clicked to display only the database records matching that "tag". And then I have an "X" near every "tag", so that the user can hide uninteresting "tags":
我想在两个元素(标签"和"X")上添加淡入淡出效果-单击"X"后.所以我正在尝试:
I would like to add a fade out effect to the both elements (the "tag" and the "X") - when the "X" has been clicked. So I am trying:
<!DOCTYPE html>
<html>
<head>
<style>
a.hide {
color:#3E6D8E;
background-color: #E0EAF1;
border-bottom: 1px solid #3E6D8E;
border-right: 1px solid #7F9FB6;
padding: 3px 4px 3px 4px;
margin: 2px 2px 2px 0;
text-decoration: none;
font-size: 90%;
line-height: 2.4;
white-space: nowrap;
}
a.hide:hover {
background-color: #e7540c;
color: #E0EAF1;
border-bottom: 1px solid #A33B08;
border-right: 1px solid #A33B08;
text-decoration: none;
}
a.filter {
color:#3E6D8E;
background-color: #E0EAF1;
border-bottom: 1px solid #3E6D8E;
border-right: 1px solid #7F9FB6;
padding: 3px 4px 3px 4px;
margin: 2px 2px 2px 0;
text-decoration: none;
font-size: 90%;
line-height: 2.4;
white-space: nowrap;
}
a.filter:hover {
background-color: #3E6D8E;
color: #E0EAF1;
border-bottom: 1px solid #37607D;
border-right: 1px solid #37607D;
text-decoration: none;
}
</style>
<script src="http://code.jquery.com/jquery-1.4.4.js"></script>
<script>
$(document).ready(function () {
$('a.hide').click(function () {
$(this).fadeOut('fast');
});
});
</script>
</head>
<body>
<p>Please click on
<a class="filter" href="?filter=1">Tag 1</a><a
class="hide" href="?hide=1">X</a></p>
<p>Please click on
<a class="filter" href="?filter=2">Tag 2</a><a
class="hide" href="?hide=2">X</a></p>
</body>
</html>
但是我有2个问题:
- 当我的PHP脚本很快时，我根本看不到任何褪色效果. (这是一个小问题，因为我的真实脚本远非快速:-))
- 我只能淡出单击的"X".如何淡出左侧的标签"? (而且我在这里不能使用#id，因为我的真实脚本中有数百个这样的标签")
请按正确的方向推动jQuery新手！ 亚历克斯
Please push the jQuery newbie in correct direction! Alex
推荐答案
您可以使用 .prev() 以获取上一个同级，然后 .andSelf() 再次包含X本身，如下所示:
You can use .prev() to get the previous sibling, then .andSelf() to again include the X itself, like this:
$(document).ready(function () {
$('a.hide').click(function () {
$(this).prev().andSelf().fadeOut('fast');
});
});
If you want to fade out the "Please click on..." as well, fade out the <p> by climbing up to it with .closest() like this:
$(document).ready(function () {
$('a.hide').click(function () {
$(this).closest('p').fadeOut('fast');
});
});
这篇关于jQuery:单击1时淡出2个元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
