Question

我正在寻找正确的方法来修改jquery函数的触发器，该函数当前在“空”的两个状态之间切换。文本超链接，并用css切换按钮替换文本作为触发器。我让新按钮在视觉上工作得很好，但很少知道如何调整新按钮触发的超链接。我猜是某种“onClick＆＃39;也许，但我没有经验。这就是我所拥有的：

首先是现有的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>

请注意＆＃39; switch-handle＆＃39;只是将移动开关拉到2个位置的部分，取决于它的开/关状态。我试验了删除它，发现开关的其余部分仍然功能化（例如改变颜色），但不再使用它的动画元素。

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

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

有什么想法？谢谢你的考虑。

编辑：我发现通过添加“管状静音”等课程，我发现了这一点。对于CSS按钮中涉及的任何类，我可以打开和关闭静音。不幸的是副作用是它杀死了css切换动画。它好像只能通过css或Jquery识别事件。

Answer 1

好吧，我尝试过很多分数和几十种方法，唯一有效的方法就是杂乱无章，但必须要有。这是有效的。

首先，我将一个onClick处理程序添加到css开关切换的表单元素中，如下所示：

 <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动画工作来解决这个问题，然后假装点击锚标签以触发相应的音频变化。凌乱如同地狱，但没有其他人在这里找到答案，所以引用巴顿将军的话说，“今天的好计划比明天的伟大计划更好”！

从CSS切换按钮

1 个答案: