如何通过切换按钮修改链接的href属性

嘿，我明白你的需求：点击那个切换按钮时，既要改定价显示的金额，还要同步把下方"aanvragen"链接的href换成新邮箱；再次点击时，价格和href都得回到原始值。现在你的代码问题在于把两个操作拆成了独立的函数，没有关联状态判断，所以href只能单向修改没法恢复。下面是完整的修复方案：

问题出在哪？ #

你当前的myFunction只管切换价格，mailaanpassing只负责把href改成新邮箱，完全没考虑切换回去的情况。而且两个函数分开调用，逻辑没绑定到同一个状态上，自然没法同步恢复。

修复后的完整代码 #

HTML（不用改，保持原来的结构就行） #

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css" integrity="sha512-xh6O/CkQoPOWDdYTDqeRdPCVd1SpvCA9XXcUnZS2FmJNp1coAFzvtCN9BmamE+4aHK8yyUHUSCcJHgXloTyT2A==" crossorigin="anonymous" referrerpolicy="no-referrer" /> 
<div class="totale-button"> 
  <div id='mybutton'> 
    <label for='mybutton-checkbox'> 
      <input type=checkbox id='mybutton-checkbox' onclick="togglePricingAndLink()"> 
      <div class='side left'>150 <i class="fa fa-user" aria-hidden="true"></i></div> 
      <div class='side right'>350 <i class="fa fa-user" aria-hidden="true"></i></div> 
    </label> 
  </div> 
  <div class="ster"> * </div> 
</div> 
<div id="prijs-small">€18</div> 
<a href="mailto:me@me.com" id="aanvragen"><button>aanvragen</button></a>

JavaScript（把两个操作整合到一个函数，同步处理） #

function togglePricingAndLink() {
  // 先拿到需要操作的元素
  const priceDisplay = document.getElementById("prijs-small");
  const requestLink = document.getElementById("aanvragen");
  const toggleCheckbox = document.getElementById("mybutton-checkbox");

  // 把原始值和切换值都存成常量，后面改起来方便
  const originalPrice = "€18";
  const discountedPrice = "€13";
  const originalMail = "mailto:me@me.com";
  const discountedMail = "mailto:someone@someone.com";

  // 根据复选框的选中状态来判断该切换到哪一组值
  if (toggleCheckbox.checked) {
    priceDisplay.innerHTML = discountedPrice;
    requestLink.href = discountedMail;
  } else {
    priceDisplay.innerHTML = originalPrice;
    requestLink.href = originalMail;
  }
}

CSS（保持你原来的样式不变） #

#mybutton { 
  width: 8rem; 
  height: 3rem; 
  border-radius: 100rem; 
  overflow: hidden; 
  display: inline-block; 
} 
.ster { 
  display: inline-block; 
  vertical-align: top; 
} 
.totale-button { 
  text-align: center; 
} 
#mybutton input { 
  display: none; 
} 
#mybutton>label { 
  display: flex; 
} 
.side { 
  width: 50%; 
  padding-inline: 0.15rem; 
  text-align: center; 
  line-height: 3rem; 
  background-color: white; 
  transition: background-color, color 300ms; 
  cursor: pointer; 
  font-weight: 800; 
  font-size: 15px; 
  color: #012d5d; 
} 
#mybutton input:not(:checked)~.left { 
  background-color: #35CB8C; 
  color: white; 
  transition: background-color, color 300ms; 
} 
#mybutton input:checked~.right { 
  background-color: #35CB8C; 
  color: white; 
  transition: background-color, color 300ms; 
}

为啥这么改？ #

1. 整合逻辑到一个函数：把价格切换和href修改绑定在一起，保证两者状态永远同步，不会出现价格变了但href没改的情况
2. 用复选框状态做判断：比起判断innerHTML里的文本，用checkbox的checked属性更靠谱——万一以后价格文本格式变了（比如加个空格），判断逻辑也不会失效
3. 常量存储固定值：把原始值和切换值单独定义，以后要改价格或者邮箱，直接改常量就行，不用在代码里到处找
4. 简化事件绑定：只需要给checkbox绑定一个点击事件，调用一个函数就搞定，代码更简洁

这样修改后，你点击切换按钮时，定价和链接的href就会同步切换，再次点击又会一起回到原始状态啦。

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