我正在寻找将触发器修改为当前在“空”文本超链接的两种状态之间切换的 jquery 函数的正确方法,并将文本替换为 css 切换按钮作为触发器。我的新按钮在视觉上运行良好,但不知道如何调整超链接以由新按钮触发。我猜可能是某种“onClick”,但我没有那么有经验。这是我拥有的:
首先是现有的 HTML(调用会在每次单击时打开和关闭音频)。
<a href="#" class="tubular-mute">Mute</a>
这是我的(视觉上)工作 HTML,它绘制了一个更有吸引力的切换按钮,而不是仅仅使用上面的“静音”一词:
<label class="switch">
<input class="switch-input" type="checkbox" />
<span class="switch-label" data-on="AUDIO" data-off="MUTE"></span>
<span class="switch-handle"></span>
</label>
请注意,'switch-handle' 只是在 2 个位置绘制移动开关的部分,具体取决于它的开/关状态。我尝试移除它,发现开关的其余部分仍然有效(例如改变颜色)但不再有它的动画元素。
那么如何激活处理此问题的 Jquery 部分呢?如果有帮助,下面是相关部分,尽管我不知道调用它的事件链是什么:
var defaults = {
playButtonClass: 'tubular-play',
pauseButtonClass: 'tubular-pause',
muteButtonClass: 'tubular-mute',
有什么想法吗?感谢您的考虑。
编辑: 从那以后,我发现通过将“tubular-mute”类添加到 CSS 按钮中涉及的任何类,我可以打开和关闭静音。不幸的是,副作用是它会破坏 css 切换动画的工作。好像事件只能被 css 或 Jquery 识别。
最佳答案
好吧,我尝试了很多方法,唯一有效的方法是一个凌乱的 bodge,但必须这样做。这是有效的方法。
首先,我向 css 开关切换的表单元素添加了一个 onClick 处理程序,如下所示:
<input onclick="relayevents()"; class="switch-input" type="checkbox" />
我还在页面上留下了工作文本超链接,因为它是唯一实际切换音频的东西,但我从中删除了文本标签,所以它不可见:
<a id="mutetoggle" href="#" class="tubular-mute"></a>
如你所见,我也给了它一个 ID,所以我可以用一点点来评估它
Javascript I put in the header:
<script type="text/javascript">
function relayevents() {
document.getElementById('mutetoggle').click();
}
</script>
我并不假装对它的工作原理有敏锐的理解,但直觉上,点击事件似乎可以用来触发动画 css 或触发 JQuery 声音操作,但不能两者兼而有之。我的方法看起来是通过让 css 动画工作来解决这个问题,然后假装单击 anchor 标记以触发相应的音频更改。 乱七八糟,但这里没有其他人找到答案,所以引用巴顿将军的话说,“今天的好计划胜过明天的好计划”!
关于javascript - 从 CSS 切换按钮触发 Jquery 事件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36899718/