Javascript jquery弹出窗口只拉最后一个弹出div

我试图让一个链接打开一个弹出窗口，当用户点击链接时，该窗口会保存一些内联HTML和图像

我已经让它工作，使每个链接打开弹出窗口，但它不会显示正确的内容-它一直拉最后一个隐藏的div，而不是一个链接被点击

；（函数（$）{
功能取消选择（e）{
$（'.pop'）.slideFadeToggle（函数（）{
e、 removeClass（“选定”）；
});    
}
$（函数（）{
$（'#popup，#popup2，#popup3，#popup4'）。在（'单击'，函数（）上）{
if（$（this）.hasClass（'selected'））{
取消选择（$（此））；
}否则{
$（this.addClass（'selected'）；
$（'.pop'）.slideFadeToggle（）；
}
返回false；
});
$（'.close'）。在（'click'，function（）上{
取消选择（$（'#popup，#popup2，#popup3，#popup4'）；
返回false；
});
});
$.prototype.slideFadeToggle=函数（放松、回调）{
返回这个。设置动画（{opacity:'toggle'，height:'toggle'}，'fast'，easing，callback）；
};
})（jQuery）
@媒体屏幕和（最大宽度：980px）{
.隐藏{
字体大小：粗体；
颜色：#0f2c6a；
显示：块！重要；
}
}
.隐藏{
显示：无；
}
a、 精选{
背景色：#1F75CC；
颜色：白色；
z指数：100；
}
.messagepop{
盒影：0.100px 450px rgba（0,0,0,0.2）；
背景色：#FFFFFF；
边框：1px实心#999999；
游标：默认值；
显示：无；
边缘顶部：15px；
文本对齐：左对齐；
最小宽度：500px；
最大宽度：1200px；
最小高度：00px；
最大高度：820像素；
z指数：99999；
填充：25px 25px 25px；
保证金：自动；
位置：固定；
排名：0；
左：0；
底部：0；
右：0；
}
@媒体屏幕和屏幕（最大宽度：480px）{
.messagepop{
最小宽度：300px！重要；
最大宽度：330px！重要；
最小高度：300px！重要；
最大高度：330px！重要；
}
.好的{
字体大小：16px；
}
}
@媒体屏幕和屏幕（最大宽度：980px）{
.messagepop{
最小宽度：600px；
最大宽度：650px；
最小高度：400px；
最大高度：640像素；
}
.好的{
字体大小：20px；
}
}
@媒体屏幕和屏幕（最大宽度：768px）{
.messagepop{
最小高度：500px；
最大高度：550px；
最小宽度：335px；
最大宽度：385px；
}
.好的{
字号：18px；
}
}
.messagepop p、.messagepop.div{
边框底部：1px实心#EFEF；
利润率：8px0；
垫底：8px；
}
#接近{
位置：绝对位置；
顶部：-10px；
右：-10px；
背景：#000；
边界半径：40px；
边框：1px实心#fff；
宽度：25px；
高度：25px；
}
#关闭{
颜色：#fff；
字体大小：15px；
线高：20px；
文字装饰：无；
文本对齐：居中；
宽度：25px；
高度：25px；
保证金：0自动；
位置：绝对位置；
排名：0；
左：0；
右：0；
底部：0；
}
波普先生，左{
浮动：左；
宽度：50%；
}
.好的{
浮动：对；
宽度：50%；
左侧填充：20px；
字体大小：20px；
线高：1.7em；
}

细节
左1
对1
细节
左2
对2
细节
左3
对三
细节
左4
对四
您在调用所有“.pop”div的同时，它们彼此重叠，因此您始终可以看到最后一个
您试图使用类选择器在元素上选择并触发事件。类选择器将为该类的所有匹配元素提供类似数组的对象

您需要做的是找到被单击的确切元素，您的click事件中有$（这个）jquery对象，它告诉您用户单击的确切元素

现在，您必须使用这个确切的元素$（this）来获取其他元素

在代码中进行如下更改

  (function($){
    function deselect(e) {
         e.prev().slideFadeToggle(function() {
        e.removeClass('selected');
      }); 
    }
    $(function() {
      $('#popup,#popup2,#popup3,#popup4').on('click', function() {
        if($(this).hasClass('selected')) {
          deselect($(this));               
        } else {
          $(this).addClass('selected');
          $(this).prev().slideFadeToggle();
        }
        return false;
      });
      $('.close').on('click', function() {
    var link = $(this).parent().parent().next().attr("id");
        deselect($("#"+link));
        return false;
      });
    });

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

工作示例：
尽管这是在小提琴中工作，但无论出于何种原因，它都不会在我的网站上工作。我正在运行wordpress，Divi主题。JS位于子主题的includes文件夹中它自己的文件中。网站的URL是什么。让我看看这不起作用，因为你网站中的html与你在小提琴中发布的html不同，在你的网站中，链接在一个标记内，这将是Wordpress自动添加到中。数字。我会尝试解决它，看看它是否有效。修复！我添加了“Dont Muck my Markup”插件，禁用了该页面的自动格式设置，它成功了！非常感谢。