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指定唯一的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只能在您的HTML中存在一次。

你有 class =“bio”的地方＆amp; class =“bio2”，更改为 id =“bio”＆amp; id =“bio2”。
我的“登录框”＆amp; “popup-image”应该改为类。

在您将函数定义为“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
    }
}

Jquery .click多个div

4 个答案: