时间戳

首页 > 解决方案 > 两个按钮触发一个脚本

javascript - 两个按钮触发一个脚本

问题描述

我有一个按钮可以触发网页上的脚本。一个实例有效。当我尝试添加第二个按钮/脚本时，两个按钮仅触发第二个脚本。我知道（认为？）这是因为我为按钮定义的 var 并不是它们各自的脚本所独有的，但我尝试的每一种方式都会破坏整个事情。

button  {
  display: block;
  cursor: pointer;
    margin-left: 10px;}  
button:after {
    content: " (off)";
  }  
button.on:before {
    content: "✓ ";
  }
button.on:after {
    content:" ";
}
.frac span { 
      -webkit-font-feature-settings: "frac" 1;
          font-feature-settings: "frac" 1;
}
.onum span {
      -webkit-font-feature-settings: "onum" 1;
          font-feature-settings: "onum" 1;  
}

html:

<button name="frac" id="frac">Fractions</button>
<button name="onum" id="onum">Oldstyle Numbers</button>
按下按钮时，此文本应该会更改 OT 功能。

JS：

<script>    var btn = document.getElementById("frac"),
    body = document.getElementById("textA"),
    activeClass = "frac";

btn.addEventListener("click", function(e){
  e.preventDefault();
  body.classList.toggle(activeClass);
  btn.classList.toggle('on');
});  </script>

      <!-- onum -->
<script>    var btn = document.getElementById("onum"),
    body = document.getElementById("textA"),
    activeClass = "onum";

btn.addEventListener("click", function(f){
  f.preventDefault();
  body.classList.toggle(activeClass);
  btn.classList.toggle('on');
});  </script>

脚本/按钮之间的差异是我所做的不同事情的一些变化，但我大部分时间都回到了开头，所以它更简单。

标签： javascripthtml

解决方案

在 javascript 中，您声明的每个变量本质上都可以在整个页面中使用。因此，将它们放在单独的标签中将无效。

所以本质上，你的第二个变量btn实际上覆盖了第一个变量。将第二个变量重命名为 btn2。

或者，作为替代方案，更改线路

btn.classList.toggle('on')

至

this.classList.toggle('on')

单击处理程序中的this将始终指向被单击的当前按钮。

推荐阅读