Javascript 在弹出窗口中打开不同的内容

此代码正常工作，但两个链接打开的信息相同，即link2`POP2的信息。如果删除第二个链接，第一个链接将毫无问题地打开。我错过了什么

HTML

$（文档）.ready（函数（）{
$（'.open'）。单击（函数（）{
$（'.pop_background'）.fadeIn（）；
$（'.pop_box'）.fadeIn（）；
返回false；
});
$（'.close'）。单击（函数（）{
$（'.pop_background'）.fadeOut（）；
$（'.pop_box'）.fadeOut（）；
返回false；
});
$（'.pop_background'）。单击（函数（）{
$（'.pop_background'）.fadeOut（）；
$（'.pop_box'）.fadeOut（）；
返回false；
});
});

POP1
&时代；
POP2
&时代；

在我看来，您似乎只为第一个弹出窗口编写了JavaScript？您没有告诉计算机应该打开哪个弹出窗口。

这些代码都引用了同一个对象。你必须给每个人分配ID

更新：我创建了一个javascript函数来接受作为容器id的参数，这样您就可以调用它一次。它在这个答案的底部

HTML

<div id="pb1" class="pop_box">
  <h1>POP1</h1>
    <span class="close">&times;</span>
</div>
  <div class="img">
    <a id="openpb1" class="open" href="#">
      click to open pop1
    </a>

<div id="pb2" class="pop_box">
  <h1>POP2</h1>
    <span class="close">&times;</span>
</div>
  <div class="img">
    <a id="openpb2" class="open" href="#">
      click to open pop2
    </a>
  </div>
</div>

POP1
&时代；
POP2
&时代；

JAVASCRIPT

对pop2重复该代码

<script>    
$(document).ready(function(){
    $('#openpb1').click(function() {
    $('#pb1').fadeIn();
    $('.pop_box').fadeIn();
    return false;
   });
    $('#pb1 .close').click(function() {
    $('#pb1').fadeOut();
    $('#pb1').fadeOut();
    return false;

  });

    $('.pop_background').click(function(){
    $('.pop_background').fadeOut();
    $('.pop_box').fadeOut();
    return false;
     });
});
</script>

$（文档）.ready（函数（）{
$（'#openpb1'）。单击（函数（）{
$（'#pb1'）.fadeIn（）；
$（'.pop_box'）.fadeIn（）；
返回false；
});
$（'#pb1.close'）。单击（函数（）{
$（'#pb1'）.fadeOut（）；
$（'#pb1'）.fadeOut（）；
返回false；
});
$（'.pop_background'）。单击（函数（）{
$（'.pop_background'）.fadeOut（）；
$（'.pop_box'）.fadeOut（）；
返回false；
});
});

将其用作函数

<script>    
   function myPopup(container){
        $(container).fadeIn();
        $('.pop_box').fadeIn();
        return false;
    }

$('#openpb1').click(function() {
myPopup('#pb1');
});

$('#openpb2').click(function() {
myPopup('#pb2');
});    
</script>

函数myPopup（容器）{
$（container.fadeIn（）；
$（'.pop_box'）.fadeIn（）；
返回false；
}
$（'#openpb1'）。单击（函数（）{
myPopup（“#pb1”）；
});
$（'#openpb2'）。单击（函数（）{
myPopup（“#pb2”）；
});    

你到底想完成什么？我启动了一个css，但是如果没有css，就很难知道您期望的是什么。另外，您真的需要jquery吗？问题很简单：在Javascript中使用类名作为选择器。由于“pop”和“pop2”具有相同的类名，Javascript无法知道您想要哪个。它无法区分它们。是的，我想这就是问题所在。。。如果我没有错的话，最简单的解决方法是为每个弹出窗口复制js和css=\如果这是jQuery，请这样标记。是的，我最终尝试了该解决方案，为每个pop重复代码。如果要编写大量弹出窗口的代码，这将是相当乏味的。。。但它是有效的……如果上述解决方案有效，那么您应该将其标记为答案。这是绕开它的唯一方法，否则你会一直重复使用同一个对象。