javascript - 当我使用类名触发时，Jquery 会在单击时触发所有元素

Question

我正在尝试在 fullcalendar 中自定义我的 basicDay View ，就像如果我单击该事件，它将滑下带有一些内容的 div 标签。 这是我的代码。

eventRender: function(event, element, view,calEvent) { 
if(view.name === 'basicDay') {
                            proj=event.title;
                            element.empty();
                            element.append('<div id="flip" class="flip1" onclick="slide()">'+proj+'</div>');
                            element.append('<div class="down" id="panel">\n\
                        Project Name: <input type="text" value="'+proj+'"/>\n\
                        Date: <input type="date" value="'+dt+'"/>');
                            element.append('</div>');
                            $(".fc-today").css("background", "white");

                        }
                    },

在这里，我清除任务元素并添加带有项目名称的自定义 div 标签。如果我有多个事件，Div 标记将动态添加。

问题是，我需要使用 class="flip1"向下滑动 div 并显示 class="down"的 div。

这就是我尝试做的事情。

function slide()
    {  
            $('.down').slideToggle("fast");

    }

问题是，如果我有多个事件，则所有 div 标签都会向下滑动。但想滑下我要点击的标签。抱歉我的英语不好，请帮我解决这个问题。提前致谢。

Answer 1

您正尝试通过单击#flip 打开#panel 您可以使用 this 传递上下文，然后选择下一个直接 #panel

在动态创建的元素中

onclick="slide(this)"

js的变化

function slide(elem){  
   var getNextPanel = $(elem).next("#panel");
   getNextPanel.slideToggle("fast");
  }

尚未测试，但您可以尝试一下。另请注意，像 panel 和 flip 这样的 id 对于所有动态创建的元素来说不能相同，id 需要是唯一的