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を持つ最初のコンテンツが表示されます。

コンテンツ要素の1つのIDを変更して、それらが異なるようにします。

于 2013-01-15T15:21:39.653 に答える
1

htmlドキュメントには、IDを持つ単一の要素を含めることができます。ログインボックスIDを持つ2つの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のlogin-boxを持っていることです。

あなたはそれらの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に1回だけ存在できます。

  • class="bio"とclass="bio2"がある場合は、それぞれid="bio"とid="bio2 "に変更します。
  • Idの「login-box」と「popup-image」をクラスに変更する必要があります。

「クリック」する関数を定義するスクリプトで、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 に答える