Jquery。单击多个div

我在一个网页上与多个锚工作。每个锚都有单独的内容，单击时会弹出。我有工作的功能，但当我点击一个不同的锚，它重复从第一个锚相同的内容。我需要有每个锚显示在弹出相应的内容。下面是我的代码。先谢谢你

<script>
$(document).ready(function() {
$('a.bio, a.bio2').click(function() {

//Getting the variable's value from a link 

var loginBox = $(this).attr('href');

//Fade in the Popup

$(loginBox).fadeIn(300);

//Set the center alignment padding + border see css style

var popMargTop = ($(loginBox).height() + 24) / 2; 
var popMargLeft = ($(loginBox).width() + 24) / 2; 
$(loginBox).css({ 
'margin-top' : -popMargTop,
'margin-left' : -popMargLeft
});

// Add the mask to body
$('body').append('<div id="mask"></div>');
$('#mask').fadeIn(300);
return false;
});

// When clicking on the button close or the mask layer the popup closed

$('a.close, #mask').live('click', function() { 
$('#mask , .login-popup').fadeOut(300 , function() {
$('#mask').remove();  
}); 
return false;
});
});
</script>

---

两个内容的id相同。id在页面中必须是唯一的才能工作。当代码显示内容时，它将显示具有该id的第一个内容

---

更改其中一个内容元素的id，使其不同。

两个内容的id相同。id在页面中必须是唯一的才能工作。当代码显示内容时，它将显示具有该id的第一个内容

---

更改其中一个内容元素的id，使其不同。

html文档可以有一个id为的元素。您有两个id为登录框id的div。您必须为每个元素指定唯一的id：

<a class="bio" href="#login-box-1">READ BIO &gt;&gt;</a>
     <div class="login-popup" id="login-box-1">
          <div id="popupimage-2">
          <h2>This is image 1</h2>
          </div></div>

<a class="bio2" href="#login-box-2">READ BIO &gt;&gt;</a></div>
     <div class="login-popup" id="login-box-2">
          <div id="popupimage-2">
          <h2>This is image 2</h2>
          </div></div>

这是图1
这是图2

html文档可以有一个id为的元素。您有两个id为登录框的div。您必须为每个div指定唯一的id：

<a class="bio" href="#login-box-1">READ BIO &gt;&gt;</a>
     <div class="login-popup" id="login-box-1">
          <div id="popupimage-2">
          <h2>This is image 1</h2>
          </div></div>

<a class="bio2" href="#login-box-2">READ BIO &gt;&gt;</a></div>
     <div class="login-popup" id="login-box-2">
          <div id="popupimage-2">
          <h2>This is image 2</h2>
          </div></div>

这是图1
这是图2

您的代码的问题在这里两个div具有相同的id登录框。

您需要更改他们的id，如下所示为您工作

<a class="bio" href="#login-box-1">READ BIO &gt;&gt;</a>
     <div class="login-popup" id="login-box1">
          <div id="popupimage-2">
          <h2>This is image 1</h2>
          </div></div>

<a class="bio2" href="#login-box-2">READ BIO &gt;&gt;</a></div>
     <div class="login-popup" id="login-box22">
          <div id="popupimage-2">
          <h2>This is image 2</h2>
          </div></div>

这是图1
这是图2

您的代码的问题在这里两个div具有相同的id登录框。

您需要更改他们的id，如下所示为您工作

<a class="bio" href="#login-box-1">READ BIO &gt;&gt;</a>
     <div class="login-popup" id="login-box1">
          <div id="popupimage-2">
          <h2>This is image 1</h2>
          </div></div>

<a class="bio2" href="#login-box-2">READ BIO &gt;&gt;</a></div>
     <div class="login-popup" id="login-box22">
          <div id="popupimage-2">
          <h2>This is image 2</h2>
          </div></div>

这是图1
这是图2

您需要更改html。可以根据需要多次重复类，但不能重复ID。Id在html中只能存在一次

• 如果您有class=“bio”&class=“bio2”，则分别更改为id=“bio”&id=“bio2”
• Id的“登录框”和“弹出图像”应更改为类

在为“click”定义函数的脚本中，创建一个if表达式来检查链接是否具有id bio或bio2

$('.link').on('click', function() {
    if ($(this).attr('id') === 'bio') {
        // Do something
    } else if ($(this).attr('id') === 'bio2') {
        // Do something else
    }
}

---

您需要更改您的html。可以根据需要多次重复类，但不能重复ID。Id在html中只能存在一次

• 如果您有class=“bio”&class=“bio2”，则分别更改为id=“bio”&id=“bio2”
• Id的“登录框”和“弹出图像”应更改为类

在为“click”定义函数的脚本中，创建一个if表达式来检查链接是否具有id bio或bio2

$('.link').on('click', function() {
    if ($(this).attr('id') === 'bio') {
        // Do something
    } else if ($(this).attr('id') === 'bio2') {
        // Do something else
    }
}

---

谢谢你，先生，就是这样。我很抱歉，但我没有将你的标记为接受的唯一原因是Murat有完美的标记-uu uu-。再次感谢您的快速回复！谢谢你，先生，就是这样。我很抱歉，但我没有将你的标记为接受的唯一原因是Murat有完美的标记-uu uu-。再次感谢您的快速回复！谢谢你，我非常感激！工作完美！谢谢你，我非常感激！工作完美！