0

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

<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;
}
4

4 回答 4

1

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

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

于 2013-01-15T15:21:39.653 回答
1

一个 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>
于 2013-01-15T15:21:53.183 回答
1

您的代码存在问题，这两个 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>
于 2013-01-15T15:21:58.373 回答
0

您需要更改您的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
    }
}
于 2013-01-15T15:26:47.783 回答