组合多个 onClick 事件

Posted 2023-02-24

【中文标题】组合多个 onClick 事件

【英文标题】：Combining multiple onClick events

【发布时间】：2017-10-10 20:28:42

【问题描述】：

我对 javascript 非常陌生，我正在努力完成我正在尝试做的某项任务。我在搜索中遇到了这两个，但与我的问题无关。

Multiple onclick events in Javascript/html

Can I create multiple onclick events dynamically?

所以这就是我所拥有的。我有图标，如果您单击它们，它们会执行某个 onClick 事件。我正在尝试将它们组合起来，所以如果你切换它们，图标会发生变化，我已经完成了图标的切换。

 onClick="$(this).find('i').attr('class', ($(this).attr('aria-expanded') == 'false' ? 'fa fa-times-circle-o' : 'fa fa-play-circle-o'));" 

现在我陷入了困境，而我的研究却一无所获。我需要将 onClick 函数添加到图标中，但我不知道如何实现这一点。

所以当点击 fa fa-play-circle-o 时会触发 triggerRadarAnimation();并且图标将切换到fa fa-times-circle-o，当按下该图标时，它将触发radarAnimateKill（）；并切换回另一个图标。

我有切换功能，只是不确定如何将上面的这些功能添加到切换功能中。关于我在哪里可以找到解决方案的任何指导？

【问题讨论】：

您能否提供更多代码，因为您的问题含糊不清，并尝试添加 js 函数而不是在元素中编写 js

【参考方案1】：

由于您使用的是 jQuery，您可以尝试以下方法：

 // Bind a click handler that can perform logic in its handler
 $(selectorString).click(function(event)
   // Toggle both classes, so we get the right state
   $(this)
     .find('i')
     .toggleClass('fa-play-circle-o')
     .toggleClass('fa-times-circle-o');

   // Check which class is currently applied, and run the appropriate 
   // animation.
   if($($(this).find('i')).hasClass('fa-times-circle-o')) 
     triggerRadarAnimation();
    else 
     radarAnimateKill();
   
 )