JQuery选择器问题：点击.category-name控制.star2淡入淡出

嘿，我完全懂你卡在可变元素选择这的感觉——其实核心就是精准定位被点击元素和目标元素之间的DOM关系，别直接全局选所有.star2就行。下面分几种最常见的DOM结构场景给你具体解决方案：

场景1：.category-name和.star2是同级元素（同属一个父容器） #

比如你的HTML结构是这样的：

<div class="category-item">
  <span class="category-name">美食分类</span>
  <i class="star2">★</i>
</div>
<div class="category-item">
  <span class="category-name">旅行分类</span>
  <i class="star2">★</i>
</div>

对应的jQuery代码：

$('.category-name').on('click', function() {
  // 用.siblings()筛选当前点击元素的同级.star2
  $(this).siblings('.star2').fadeToggle();
});

解释：$(this)就是你刚点击的那个.category-name，.siblings('.star2')只会找它同一层级下的目标元素，不会影响其他分类的.star2。

场景2：.star2是.category-name的子元素 #

如果目标星星在点击的分类名称内部：

<div class="category-name">
  数码分类
  <i class="star2">★</i>
</div>

用find()方法查找后代元素：

$('.category-name').on('click', function() {
  $(this).find('.star2').fadeToggle();
});

解释：find()会在当前元素的所有后代里搜索匹配的选择器，适合目标元素嵌套在点击元素内部的情况。

场景3：.star2是.category-name的相邻兄弟元素 #

如果星星紧挨着分类名称的下一个（或上一个）位置：

<span class="category-name">美妆分类</span>
<i class="star2">★</i>

用next()直接定位下一个相邻元素：

$('.category-name').on('click', function() {
  $(this).next('.star2').fadeToggle();
});

要是星星在分类名称的前一个位置，就换成$(this).prev('.star2')。

场景4：层级较深，共享共同祖先容器 #

如果结构层级复杂，比如点击元素和目标元素在同一个父容器的不同分支里：

<div class="category-box">
  <div class="title-bar">
    <span class="category-name">家居分类</span>
  </div>
  <div class="action-bar">
    <i class="star2">★</i>
  </div>
</div>

先找共同的祖先容器，再在里面找目标元素：

$('.category-name').on('click', function() {
  // closest()找到最近的共同祖先，再用find()定位.star2
  $(this).closest('.category-box').find('.star2').fadeToggle();
});

解释：closest()会从当前元素向上遍历DOM树，找到第一个匹配的祖先元素，比多次用parent()更灵活，适合层级不确定的情况。

核心要点总结 #

永远用$(this)指代当前被点击的那个.category-name，然后通过jQuery的DOM遍历方法（siblings()/find()/next()/closest()等）锁定对应的.star2，这样就不会误操作其他无关的星星元素啦。

内容的提问来源于stack exchange，提问作者Banane777