javascript - jQuery 有多个点击事件

Question

我有一个正在运行的日历，如果事件多于 3 个，我每天都会有一个“更多..”按钮。单击此按钮后，会出现一个下拉列表，显示当天的其他事件。

它为每个下拉列表获取正确的数据，但如果我单击触发单击的按钮，它们都会打开。

Jquery:

 <script>
 function deselect(e) {
 $('.pop').slideFadeToggle(function() {
   e.removeClass('selected');
 });
}

$(function() {
  $('[id^=contact]').on('click', function() {
   if($(this).hasClass('selected')) {
     deselect($(this));
       } else {
  $(this).addClass('selected');
    $('.pop').slideFadeToggle();
    }
    return false;
  });

  $('.close').on('click', function() {
    deselect($('#contact'));
    return false;
  });
});

$.fn.slideFadeToggle = function(easing, callback) {
  return this.animate({ opacity: 'toggle', height: 'toggle' }, 'fast', easing,     callback);


};
</script>

HTML + Django

{% if forloop.counter|divisibleby:2 %}
    <a href="/contact" id="contact{{     forloop.counter }}" class="popup"><small>More...<small></a>
    <div class="messagepop pop">
{% endif %}

<p class="alert" style="background- color: #{{ occurrence.event.category.color }}">
    <a title="{{ occurrence }}" href="{% url "calendar_occurrence_detail" pk=occurrence.event.pk year=occurrence.start.year month=occurrence.start.month day=occurrence.start.day %}">{{ occurrence|truncatechars:22 }}</a>
</p>
{%if forloop.last%}
    </div>
{% endif %}

我不是最擅长 JQuery，所以这对其他人来说可能很简单，但我似乎无法弄清楚

提前致谢! JF

编辑 - 悬停 div + 数据是在 for 循环中创建的

Answer 1

您可以在当前单击的按钮的单击处理程序中使用 .next() 选择器方法
( $(this) ).

改变一下

$('.pop').slideFadeToggle();

至

$(this).next().slideFadeToggle();