点击.btn类图片时为.hidden类图片添加.show类的jQuery实现问题

嘿，我完全懂你现在的困扰——本来想点击带.btn类的"click here"图片时，给带.hidden类的图片加上.show类，结果不小心把类加到父元素上了，这肯定不是你想要的效果。别慌，咱们来一步步排查解决！

首先，大概率是你在选择目标.hidden元素时，不小心定位到了父节点，或者事件绑定的上下文没搞对。下面根据几种常见的DOM结构场景，给你对应的解决方案：

场景1：.btn和.hidden是同级兄弟元素 #

如果你的DOM结构大概是这样的：

<div class="container">
  <img src="click-here.jpg" class="btn" alt="click here">
  <img src="target.jpg" class="hidden" alt="target">
</div>

那你可以用siblings()方法直接找到同级的.hidden元素：

$(function() {
  $('.btn').click(function() {
    // $(this)指代当前被点击的.btn图片
    $(this).siblings('.hidden').addClass('show');
  });
});

场景2：.hidden在.btn的父容器的其他子节点里 #

如果.hidden不在.btn的直接同级位置，而是在共同父容器的某个子元素里，比如：

<div class="container">
  <div class="btn-wrapper">
    <img src="click-here.jpg" class="btn" alt="click here">
  </div>
  <div class="content">
    <img src="target.jpg" class="hidden" alt="target">
  </div>
</div>

这时候可以先通过closest()找到最近的共同父容器，再用find()定位到.hidden：

$(function() {
  $('.btn').click(function() {
    // 先找到最近的.container父元素，再在里面找.hidden图片
    $(this).closest('.container').find('.hidden').addClass('show');
  });
});

场景3：需要给页面中所有.hidden图片加类 #

如果你是想点击.btn后，给页面上所有带.hidden的图片都加上.show，那直接全局选择就行：

$(function() {
  $('.btn').click(function() {
    $('.hidden').addClass('show');
  });
});

不过要注意，这种方式会影响所有匹配的元素，确认是你想要的效果再用哦。

额外提醒：动态生成的.btn元素 #

如果你的.btn图片是通过JS动态添加到页面的（比如异步加载后生成），那普通的事件绑定会失效，这时候要用事件委托：

$(function() {
  $(document).on('click', '.btn', function() {
    // 这里可以用上面任意一种定位.hidden的方法
    $(this).siblings('.hidden').addClass('show');
  });
});

最后再检查一下：确保你的类名没有拼写错误，.hidden元素确实存在于DOM中，而且代码要放在$(document).ready()（或者简写的$(function(){...})）里，保证DOM加载完成后再执行绑定逻辑。

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