jQuery：当点击1时淡出2个元素

我有一个PHP / PostgreSQL / Oracle脚本，它将链接显示为“标签”，可以单击它来显示与“标签”匹配的数据库记录。 然后我在每个“标签”附近都有一个“X”，这样用户就可以隐藏不感兴趣的“标签”：

我想在两个元素（“标签”和“X”）上添加淡出效果 – 当单击“X”时。 所以我想：

    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; }    $(document).ready(function () { $('a.hide').click(function () { $(this).fadeOut('fast'); }); });    
Please click on Tag 1X
 
Please click on Tag 2X
   

但是我有两个问题：

1. 当我的PHP脚本很快时，我根本看不到任何淡入淡出效果。 （这是一个小问题，因为我的真实剧本远非快速🙂 ）
2. 我只设法淡出点击的“X”。 我怎样才能淡出左边的“标签”呢？ （而且我不能在这里使用#id，因为我的真实脚本有数百个这样的“标签”）

请按正确的方向推jQuery新手！ 亚历克斯

Answer 1

您可以使用.prev()来获取前一个兄弟，然后.andSelf()再次包含X本身，如下所示：

 $(document).ready(function () { $('a.hide').click(function () { $(this).prev().andSelf().fadeOut('fast'); }); }); 

如果你想逐渐淡出“请点击……”，可以通过使用.closest()爬上

来淡出

：

 $(document).ready(function () { $('a.hide').click(function () { $(this).closest('p').fadeOut('fast'); }); }); 

Answer 2

这种方式将解决看不到淡出的小问题……

 $(document).ready(function () { $('a.hide').each(function (i, anchor) { var $anchor = $(anchor); var oldHref = $anchor.attr('href'); $anchor.attr('href', '#'); $anchor.click(function(){ $anchor.prev().andSelf().fadeOut('fast', function(){ window.location.href = oldHref; }); }); }); }); 

基本上，它删除了href并用＃替换它，因此在触发事件之前它不会导航。 在淡出之后，用户被导航到原始href。

Answer 3

因为duration是hide（）的第一个参数，你应该像这样使用它：

 hide(1000, 'explode');