Jquery .click多个div

我正在单个页面中使用多个锚点。每个锚点都有单独的内容来点击时弹出。我有功能工作，但当我点击一个不同的锚点，它重复从第一个锚点相同的内容。我需要让每个锚点在弹出窗口中显示相应的内容。以下是我的代码。先谢谢你。Jquery .click多个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>

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

来源

2013-01-15 ac12

一个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-15 15:21:53

谢谢我非常感谢！工作完美！ – ac12

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

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

来源

2013-01-15 15:21:39 Guffa

问题与你的代码是在这里双方的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-15 15:21:58

谢谢，先生，这就是它。我很抱歉，但我不赞成你接受的唯一原因是穆拉特有完美的标记-__-。再次感谢您的快速响应！ – ac12

你需要改变你的HTML。您可以根据需要多次重复上课，但不能使用ID。 Id只能在您的html中存在一次。

如果你有类= “生物” & 类= “生物圈二号”，改变ID = “生物” & ID = “生物圈二号”分别。
Id的“登录框”&“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 
    } 
}

来源

2013-01-15 15:26:47 danielcorreia

Jquery .click多个div

回答

相关问题