从 CSS 切换按钮触发 Jquery 事件

Triggering a Jquery event from a CSS toggle button

本文关键字：Jquery 事件 按钮 CSS      更新时间：2023-09-26

我正在寻找正确的方法来将触发器修改为 jquery 函数，该函数当前在"空"文本超链接的 2 种状态之间切换，并用 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>

请注意，"开关手柄"只是根据其开/关状态在 2 个位置绘制移动开关的部分。我尝试删除它，发现开关的其余部分仍然起作用（例如改变颜色），但不再有它的动画元素。

那么如何激活处理此问题的 Jquery 部分呢？如果它有帮助，下面是看起来像相关部分的内容，尽管我不知道调用它的事件链是什么：

var defaults = {
        playButtonClass: 'tubular-play',
        pauseButtonClass: 'tubular-pause',
        muteButtonClass: 'tubular-mute',

有什么想法吗？ 感谢您的考虑。

编辑：从那以后，我发现通过将类"管状静音"添加到CSS按钮中涉及的任何类中，我可以打开和关闭静音。不幸的是，副作用是它会杀死 css 切换动画。就好像事件只能被 css 或 Jquery 识别一样。

好吧，我尝试了几十种方法，唯一有效的方法是一个混乱的笨蛋，但必须。这是有效的方法。

首先，我在 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 动画工作来解决这个问题，然后假装单击锚标签以触发音频的相应更改。乱七八糟的地狱，但这里没有其他人找到答案，所以引用巴顿将军的话，"今天的好计划胜过明天的好计划"！

相关文章：