可以单击多个区域时如何更改一张图像答案

【问题标题】：How to change one image when multiple areas can be clicked可以单击多个区域时如何更改一张图像
【发布时间】：2015-08-07 21:58:23
【问题描述】：

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

我的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;">...

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

【问题讨论】：

标签： javascript jquery twitter-bootstrap

【解决方案1】：

由于您希望两个元素触发相同的功能，只需将它们都赋予相同的类即可。然后在该类上设置点击事件。

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

和

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

【讨论】：

其实我先试过了，还是不行。我最终做的是将它添加到关闭窗口本身的点击功能中。
我忘了说的是，你必须改变你的函数，因为 $(this) 为两个类返回不同的东西。

【解决方案2】：

最终解决这个问题的方法是将图像交换添加到打开和关闭窗口的实际点击功能中。通过为“

$(document).on('click', ...

$('#chatWindowStatusToggle').attr('src', function (index, currentSource) {
  return currentSource == '/img/icons/icon-minimize.png' ? '/img/icons/icon-plus.png' : '/img/icons/icon-minimize.png';
});  

...

【讨论】：