如何实现仅让被点击#card内的.content元素旋转？

嘿，别担心，这个小问题刚接触jQuery时真的很容易碰到！咱们先理清楚问题出在哪，再给你最简单的解决方案～

问题根源 #

你之前的代码应该是直接选中了所有.content元素来执行旋转操作，没有限定是当前被点击的卡片内部的那个.content，所以一点击就会触发所有元素的旋转。

关键修正：用$(this)限定操作范围 #

首先提个重要细节：HTML里的ID是唯一的，不能给6个卡片都用#card哦，建议把卡片的ID改成类.card（不然浏览器会优先识别第一个ID，后续的可能出问题）。

然后修改你的jQuery代码，核心就是用$(this)指代当前被点击的卡片，然后只操作它内部的.content：

// 给所有卡片绑定点击事件
$('.card').click(function() {
  // 只找到当前点击卡片里的.content元素，切换旋转类
  $(this).find('.content').toggleClass('rotate');
});

配合CSS实现旋转效果 #

你需要一个CSS类来定义旋转样式，比如：

.content {
  transition: transform 0.3s ease; /* 加上过渡动画，旋转更丝滑 */
}

.rotate {
  transform: rotate(180deg); /* 这里可以改成你想要的旋转角度 */
}

为什么这样有效？ #

• $(this)在点击事件里，就是你刚刚点击的那个.card元素，精准定位到触发事件的卡片。
• .find('.content')只会在这个卡片的内部查找.content元素，不会影响其他卡片里的内容。

这样再点击任意卡片，就只有它内部的.content会旋转啦～

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