javascript - 当可以单击多个区域时如何更改一张图像

Question

我在可扩展的聊天窗口上有一个图像。基本的加号和减号，但我感兴趣的是你可以单击两个不同的点来打开窗口。现在，当您单击图标时，图像会发生变化，但如果您单击聊天窗口的标题栏或人名并展开窗口，图标将保持不变，然后不同步。我觉得必须有一种可靠的方法将所有这些选项包含到一个方法中，但无法弄清楚。似乎只要在“< a >”点击上触发它就是答案，但我无法正确地使用该措辞。

我的jquery方法是这样的

$(document).on('click','.chatWindowStatusImageToggle', function(){
$(this).attr('src', function (index, currentSource) {
  return currentSource == '/img/icons/icon-minimize.png' ? '/img/icons/icon-plus.png' : '/img/icons/icon-minimize.png';
 });   
});

下面有两个标签(第一个标签中有 img src，并且是单击时更改图像的标签)。它们位于 div 内部，前面有一个下拉菜单。

<div class="chat-controls">

...

  <a class="chatWindowStatus myCollapse"  data-toggle="collapse" data-parent="#chatAccordion" href="#chat-{{ $thread->id }}" aria-expanded="true" aria-controls="chat-{{ $thread->id }}" data-thread-id="{{$thread->id}}"><img class="chatWindowStatusImageToggle ...

  <a class="myCollapse chat-title" data-toggle="collapse" data-parent="#chatAccordion" href="#chat-{{ $thread->id }}" aria-expanded="true" aria-controls="chat-{{ $thread->id }}" data-thread-id="{{$thread->id}}" style="width:65%; float:left;">...

非常感谢您对此提供的任何帮助。

Answer 1

当您希望两个元素触发相同的功能时，只需为它们指定相同的类即可。然后在该类上设置点击事件。

<a class="fireFunction chatWindowStatus myCollapse>...</a>
<a class="fireFunction myCollapse chat-title>...</a>

和

$(document).on('click','.fireFunction ', function(){
  ...
});