jQuery .click多个div

Question

我正在使用多个锚的单个页面中工作。 每个锚点都有单独的内容，在单击时会弹出。 我可以使用该功能，但是当我单击其他锚点时，它将重复第一个锚点的相同内容。 我需要让每个锚点在弹出窗口中显示相应的内容。 下面是我的代码。 先感谢您。

<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>

HTML

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

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

CSS

.login-popup {
background: none repeat scroll 0 0 #585858;
display: none;
float: left;
font-size: 1.2em;
height: 350px;
left: 50%;
padding: 20px;
position: fixed;
top: 50%;
width: 500px;
z-index: 999999999;
color:#FFF;
}

Answer 1

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

更改内容元素之一的ID，以使它们不同。

Answer 2

一个html文档可以有一个带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>

Answer 3

您的代码存在问题，这是两个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>

Answer 4

您需要更改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
    }
}