使用html5音频中的文本链接打开/关闭javascript执行

我使用一个代码来突出显示根据“时间”读取的单词，默认情况下是打开的。我需要它在默认情况下保持打开状态，但在“文本链接”上添加一个功能，可以切换高亮显示的开/关（因此单击时没有高亮显示。因此，当我单击“禁用”一词时，它将禁用代码的执行，“禁用”一词将自动更改为“启用”，反之亦然

下面是一段代码：

var spns=document.getElementsByTagName（“SPAN”）；
var audi=document.getElementById（“adi”）；
奥迪.addEventListener（“时间更新”，f1）；
函数f1（）{
var i；
对于（i=0；i0）SPN[i-1].style.backgroundColor=“白色”；
spns[i].style.backgroundColor=“红色”；
}
}
}

好的，我们第二次尝试这个，来测试这个能力。。。

您可以使用

removeEventListener

：

audi.removeEventListener（f1）

---

或者你可以在你的

f1（）

函数前面有一个函数，

var enabled=true

，在f1中，如果

enabled==false

，在开始处返回，然后写下你的按钮，点击监听器来更改

enabled

变量。

你可以使用

removeEventListener

：

audi.removeEventListener（f1）

---

或者您可以在

f1（）之前有一个函数

函数，

var enabled=true

，在f1中，如果

enabled==false，则在开始处返回，然后编写您的按钮单击侦听器以更改
enabled
变量。
我将使用CSS并根据父级的类来确定跨距。这使得逻辑更简单


var textHighlightOn=true，
btnToggle=document.getElementById（'toggleTxt'），
textDiv=document.querySelector（“.text highlight”）
spns=document.getElementsByTagName（“SPAN”），
奥迪=document.getElementById（“adi”）；
奥迪.addEventListener（“时间更新”，f1）；
函数f1（）{
var i；
对于（i=0；i0）{
spns[i-1].classList.remove（'active'）；
spns[i-1].classList.add（'active-prev'）；
}
spns[i].classList.add（'active'）；
}
}
}
btnToggle.addEventListener（“单击”，函数（）{
如果（文本高亮显示）{
textDiv.classList.add（'off'）；
}否则{
textDiv.classList.remove（'off'）；
}
this.innerHTML='Highlight'+（textHighlightOn？'off'：'on'）；
textHighlightOn=！textHighlightOn；
})；
正文{
背景：#008000；
}
.文本高亮显示span.active-prev{
背景：#fff；
}
.文本高亮显示span.active{
背景#03a9f4；
}
.text-highlight.off span{
背景：透明；
}

突出显示
好的，我们第二次尝试这个，来测试这个能力。。。
我会使用CSS，并根据父级的类来确定跨度。这使得逻辑更简单


var textHighlightOn=true，
btnToggle=document.getElementById（'toggleTxt'），
textDiv=document.querySelector（“.text highlight”）
spns=document.getElementsByTagName（“SPAN”），
奥迪=document.getElementById（“adi”）；
奥迪.addEventListener（“时间更新”，f1）；
函数f1（）{
var i；
对于（i=0；i0）{
spns[i-1].classList.remove（'active'）；
spns[i-1].classList.add（'active-prev'）；
}
spns[i].classList.add（'active'）；
}
}
}
btnToggle.addEventListener（“单击”，函数（）{
如果（文本高亮显示）{
textDiv.classList.add（'off'）；
}否则{
textDiv.classList.remove（'off'）；
}
this.innerHTML='Highlight'+（textHighlightOn？'off'：'on'）；
textHighlightOn=！textHighlightOn；
})；
正文{
背景：#008000；
}
.文本高亮显示span.active-prev{
背景：#fff；
}
.文本高亮显示span.active{
背景#03a9f4；
}
.text-highlight.off span{
背景：透明；
}

突出显示
好的，我们第二次尝试这个，来测试这个能力。。。
当我点击按钮时，整个文本都会以白色背景突出显示。我需要一个正常的无色背景。@Mike，我不确定我是否跟在你后面，要不要用截图演示一下？@Mike，我将所有样式更改移到CSS。应该更容易处理。谢谢你的耐心。效果很好，但我切换ba时没有打开，它删除了阅读部分的白色突出显示。我的意思是，当再次单击它时，它应该会在先前突出显示的文本上显示白色背景。@Mike，没问题，第一印象是您不需要为先前的
span
s设置特殊样式。当我单击按钮时，它会使整个文本突出显示h白色背景。我需要一个正常的无色背景。@Mike，我不确定我是否能跟上你，要不要用截图演示一下？@Mike，我将所有样式更改移到CSS。应该更容易处理。感谢你的耐心。效果很好，但当我重新打开时，它从阅读部分删除了白色突出显示。我的意思是w当再次单击它时，它应该会在先前高亮显示的文本上显示白色背景。@Mike，没问题，第一印象是您不希望以前的
span
s有特殊的样式。