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

Question

我正在尝试在全日历中自定义我的 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 需要是唯一的