本文介绍使用 jquery 实现点击一个元素时同步切换多个 div 的 css 类，从而控制其透明度状态，并支持双向切换（即再次点击恢复原状），同时推荐添加 css 过渡以提升视觉体验。
本文介绍使用 jquery 实现点击一个元素时同步切换多个 div 的 css 类，从而控制其透明度状态，并支持双向切换（即再次点击恢复原状），同时推荐添加 css 过渡以提升视觉体验。
要实现点击 .gif_left 时，不仅自身透明度归零（opacity: 0），同时让 .gif_right 透明度变为 1（opacity: 1），且再次点击可完全逆转该状态，关键在于在同一个事件处理函数中统一操作多个目标元素，而非仅作用于 this。
以下是完整、可直接运行的解决方案：
<style>
.gif_left, .gif_right {
width: 200px;
height: 150px;
display: inline-block;
transition: opacity 0.4s ease; /* 推荐添加平滑过渡 */
}
.gif_left { background-color: #ffcc00; opacity: 1; }
.gif_right { background-color: #3498db; opacity: 0; }
.click { opacity: 0 !important; }
.click2 { opacity: 1 !important; }
</style>
<div class="gif_left"></div>
<div class="gif_right"></div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
$('.gif_left').click(function () {
$('.gif_left').toggleClass('click');
$('.gif_right').toggleClass('click2');
});
});
</script>✅ 说明与要点：
- 使用
$('.gif_left').toggleClass('click')和$('.gif_right').toggleClass('click2')确保两个元素的状态严格同步； -
!important在 CSS 中用于确保类样式能覆盖初始内联或规则中的opacity值（可根据实际 CSS 层叠结构调整）； -
transition: opacity 0.4s ease让透明度变化具备自然动画效果，大幅提升用户体验； - 若需支持任一 div 点击均触发切换（如左右均可点击互换），可改用多选择器绑定：
$('.gif_left, .gif_right').click(function() { $('.gif_left').toggleClass('click'); $('.gif_right').toggleClass('click2'); });
⚠️ 注意事项：
立即学习“前端免费学习笔记（深入）”；
- 避免在
.click和.click2中重复定义opacity以外的布局属性（如display: none），否则可能干扰transition效果； - 若页面存在多个
.gif_left/.gif_right组，建议为每组添加唯一父容器并使用相对选择器（如$(this).closest('.group').find('.gif_right')），防止全局误操作； - 现代项目中也可考虑用纯 JavaScript 替代 jQuery（如
element.classList.toggle()），但本方案兼顾兼容性与简洁性。
通过这一模式，你不仅能精准控制多元素状态联动，也为后续扩展交互逻辑（如添加加载态、禁用点击、记录状态等）打下清晰基础。
