javascript - 从 CSS 切换按钮触发 Jquery 事件

Question

我正在寻找将触发器修改为当前在“空”文本超链接的两种状态之间切换的 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 识别。

Answer 1

好吧，我尝试了很多方法，唯一有效的方法是一个凌乱的 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 标记以触发相应的音频更改。乱七八糟，但这里没有其他人找到答案，所以引用巴顿将军的话说，“今天的好计划胜过明天的好计划”!