求助：点击按钮实现元素移动至不同位置的代码故障排查

你要实现点击三个按钮，分别给图片容器设置不同的padding-left，但当前代码没生效，问题出在JavaScript逻辑错误：

• 原代码里，点击按钮时，你把en/cn/ar类加到了按钮元素（$(this)指向被点击的按钮）上，而不是图片所在的.logo容器。CSS里的样式是针对.logo的子类设置的，自然不会影响图片位置。
• 同时，原代码的removeClass逻辑也有问题，应该先移除.logo上所有目标类，再添加对应类，避免多个类叠加冲突。

修正后的代码 #

HTML（无需修改）

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="logo"><img src="https://images.pexels.com/photos/1114318/pexels-photo-1114318.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" /></div>

<div class="nav">
  <div class="button" id="cardEN">Button 01</div>
  <div class="button" id="cardCN">Button 02</div>
  <div class="button" id="cardAR">Button 03</div>
</div>

CSS（无需修改）

img {
  width: 100px;
}

.logo {
  padding-left: 0px;
}

.en {
  padding-left: 0px;
}

.cn {
  padding-left: 30px;
}

.ar {
  padding-left: 60px;
}

.nav {
  padding-top: 100px
}

.button {
  display: inline-block;
  text-align: center;
  margin-left: 20px;
  width: 50px;
  border: 1px solid black;
  cursor: pointer;
}

JavaScript（修正逻辑）

// 点击Button 01，给logo添加en类
$('#cardEN').on('click', function() {
  $('.logo').removeClass('cn ar').addClass('en');
});

// 点击Button 02，给logo添加cn类
$('#cardCN').on('click', function() {
  $('.logo').removeClass('en ar').addClass('cn');
});

// 点击Button 03，给logo添加ar类
$('#cardAR').on('click', function() {
  $('.logo').removeClass('en cn').addClass('ar');
});

额外优化（可选） #

如果想减少重复代码，可通过自定义属性实现统一事件处理，扩展性更强：

$('.button').on('click', function() {
  const targetClass = $(this).data('class');
  $('.logo').removeClass('en cn ar').addClass(targetClass);
});

对应的HTML按钮部分修改为：

<div class="button" id="cardEN" data-class="en">Button 01</div>
<div class="button" id="cardCN" data-class="cn">Button 02</div>
<div class="button" id="cardAR" data-class="ar">Button 03</div>

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