JavaScript

优惠券领取后样式发生改变，切点级别的优惠券时，上一个不会变成原来的样式，该怎么做

• 帮你找了个相似的问题, 你可以看下: https://ask.csdn.net/questions/7803462
• 这篇博客也不错, 你可以看下javascript常见错误及处理方法
• 您还可以看一下 杨胜强老师的JavaScript精讲课程中的 JavaScript函数小节, 巩固相关知识点
  

可以使用以下方法：

1. 给每个优惠券设置一个唯一的ID，例如：coupon-1, coupon-2, coupon-3 等等。

2. 当用户点击领取优惠券时，使用 JavaScript 获取该优惠券的 ID，并添加一个类名，例如：selected。

3. 在 CSS 中设置 .selected 类的样式，以突出显示选中的优惠券。

4. 当用户切换到另一个优惠券时，使用 JavaScript 删除前一个优惠券的 .selected 类，并添加到当前优惠券。

以下是示例代码：

HTML 代码：
<div id="coupons">
  <div id="coupon-1" class="coupon">
    <h3>Coupon 1</h3>
    <button class="btn">Get Coupon</button>
  </div>
  <div id="coupon-2" class="coupon">
    <h3>Coupon 2</h3>
    <button class="btn">Get Coupon</button>
  </div>
  <div id="coupon-3" class="coupon">
    <h3>Coupon 3</h3>
    <button class="btn">Get Coupon</button>
  </div>
</div>

CSS 代码：

.coupon {
  border: 1px solid #ccc;
  padding: 10px;
  margin-bottom: 10px;
}

.selected {
  border-color: #f00;
}

JavaScript 代码：

var coupons = document.querySelectorAll('.coupon');

coupons.forEach(function(coupon) {
  var btn = coupon.querySelector('.btn');
  var id = coupon.id;
  
  btn.addEventListener('click', function() {
    // Remove selected class from other coupons
    coupons.forEach(function(coupon) {
      coupon.classList.remove('selected');
    });
    
    // Add selected class to current coupon
    coupon.classList.add('selected');
  });
});

在上面的代码中，我们首先使用 document.querySelectorAll() 获取所有的优惠券。然后，使用 forEach() 循环遍历每个优惠券，并为每个按钮添加一个点击事件监听器。当用户点击领取优惠券按钮时，我们首先使用 forEach() 删除所有优惠券的 .selected 类，然后将该类添加到当前优惠券。这样，只有当前选中的优惠券会突出显示。