このコードは動作していますが、すべてのリンクが同じ情報を開きます。これはlink2の情報です。ポップアップウィンドウで異なる内容を開く

POP2

、。 2番目のリンクを削除すると、問題なく最初のリンクが開きます。私は何が欠けていますか？私に

HTML


 
    $(document).ready(function(){ 
 
    
 
     $('.open').click(function() { 
 
     $('.pop_background').fadeIn(); 
 
     $('.pop_box').fadeIn(); 
 
     return false; 
 
     }); 
 
     $('.close').click(function() { 
 
     $('.pop_background').fadeOut(); 
 
     $('.pop_box').fadeOut(); 
 
     return false; 
 
    
 
     }); 
 
    
 
     $('.pop_background').click(function(){ 
 
     $('.pop_background').fadeOut(); 
 
     $('.pop_box').fadeOut(); 
 
     return false; 
 
     }); 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="responsive1"> 
 
    <div class="pop_background"></div> 
 
    <div class="pop_box"> 
 
     <h1>POP1</h1> 
 
     <span class="close">&times;</span> 
 
    </div> 
 
     <div class="img"> 
 
     <a class="open" href="#"> 
 
      click to open pop 
 
     </a> 
 
     
 
     </div> 
 
    </div> 
 
    <div class="responsive1"> 
 
    <div class="pop_background"></div> 
 
    <div class="pop_box"> 
 
     <h1>POP2</h1> 
 
     <span class="close">&times;</span> 
 
    </div> 
 
     <div class="img"> 
 
     <a class="open" href="#"> 
 
      click to open pop2 
 
     </a> 
 
     
 
     </div> 
 
    </div>

出典

2016-11-05 Mr_sang

正確に何を達成しようとしていますか？私は[codepen]（http://codepen.io/AnotherLinuxUser/pen/oYNrRX）を始めましたが、CSSなしでは、あなたが期待していることを知ることは難しいです。また、本当にjqueryが必要ですか？ – Alex

問題は非常に単純です：Javascriptのセレクタとしてクラス名を使用しています。 "pop"と "pop2"の両方に同じクラス名が付いているので、Javascriptはあなたが望むものを知る方法がありません。それを区別することはできません。 – icecub

はい、私はそれが問題だと想像しました...私が間違っていないならば、簡単な解決策は、各ポップアップのjsとcssを複製することです... = \ –

コードはすべて同じオブジェクトを参照しています。それぞれにIDを割り当てる必要があります。

更新：私はコンテナIDであるパラメータを受け入れるようにjavascript関数を作成しましたので、一度呼び出すことができます。そのこの答えの下部に

HTML

<div id="pb1" class="pop_box"> 
    <h1>POP1</h1> 
    <span class="close">&times;</span> 
</div> 
    <div class="img"> 
    <a id="openpb1" class="open" href="#"> 
     click to open pop1 
    </a> 

<div id="pb2" class="pop_box"> 
    <h1>POP2</h1> 
    <span class="close">&times;</span> 
</div> 
    <div class="img"> 
    <a id="openpb2" class="open" href="#"> 
     click to open pop2 
    </a> 
    </div> 
</div>

JAVASCRIPT

リピート機能としてそれを使用してPOP2

<script>  
$(document).ready(function(){ 
    $('#openpb1').click(function() { 
    $('#pb1').fadeIn(); 
    $('.pop_box').fadeIn(); 
    return false; 
    }); 
    $('#pb1 .close').click(function() { 
    $('#pb1').fadeOut(); 
    $('#pb1').fadeOut(); 
    return false; 

    }); 

    $('.pop_background').click(function(){ 
    $('.pop_background').fadeOut(); 
    $('.pop_box').fadeOut(); 
    return false; 
    }); 
}); 
</script>

ためのコード

<script>  
    function myPopup(container){ 
     $(container).fadeIn(); 
     $('.pop_box').fadeIn(); 
     return false; 
    } 

$('#openpb1').click(function() { 
myPopup('#pb1'); 
}); 

$('#openpb2').click(function() { 
myPopup('#pb2'); 
});  
</script>

出典

2016-11-05 06:19:10

はい、私はそのソリューションを試してみました。相当な数のpopUpsをコード化しなければならない場合は非常に面倒ですが、それはうまくいきます。 –

上記の解決策がうまくいけば、答えとしてマークする必要があります。その周りの唯一の方法は、あなたはいつも同じオブジェクトをリフレッシュし続けます。 –

あなただけの最初のポップアップ用のJavaScriptを書かれているように見えますか？どのポップアップを開くべきかをコンピュータに知らせるわけではありません。

出典

2016-11-05 06:15:14

ポップアップウィンドウで異なる内容を開く

POP2

答えて

関連する問題