Bootstrap Popover: offen ein popover mit 2 verschiedenen Links

Question

Hallo (und sorry, wenn mein Englisch nicht richtig ist),

Ich versuche, das gleiche popover zu wechseln, aber mit 2 verschiedenen Links.

Zum Beispiel:

1. Link - Popover ist es angebracht

2. Link - Kann die popover öffnen auf dem ersten Link

Ich habe versucht, es zu tun:

<a class="pop-contact" data-placement="bottom" data-toggle="popover" data-title="Contact" data-container="body" type="button" data-html="true" id="contact">1st link</a> 

<div id="popover-content" class="hide"> 
    test 
</div> 

<a class="pop-contact" data-placement="bottom" data-toggle="popover" data-title="Contact" data-container="body" type="button" data-html="true" id="contact">2nd link (open the popover on the first link)</a> 

Aber es funktioniert nicht, es kopiert das Popover.

Es ist mein Bootply: http://www.bootply.com/jAGRX9hm1a

Danke

Answer 1

$(document).ready(function() 
 
{ 
 
    var t= $(".pop-contact").popover({ 
 
     html: true, 
 
     content: function() { 
 
      return $('#popover-content').html(); 
 
     } 
 
    }); 
 
    
 
    var shown=false; 
 
    
 
t.on('show.bs.popover', function() { 
 
    shown=true; 
 
}); 
 
    
 
    t.on('hide.bs.popover', function() { 
 
    shown=false; 
 
}); 
 
    
 
    
 
    $('.pop-contact2').click(function(e){ 
 
    e.preventDefault(); 
 
    if(shown) 
 
    t.popover('hide'); 
 
    else 
 
     t.popover('show');  
 
    }); 
 
    
 
});

<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 

 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script> 
 
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 

 
<a class="pop-contact" data-placement="bottom" data-toggle="popover" data-title="Contact" data-container="body" type="button" data-html="true" id="contact">1st link</a> 
 

 
<div id="popover-content" class="hide"> 
 
    test 
 
</div> 
 

 

 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
 
<a class="pop-contact2" type="button" id="contact">2nd link</a> 
 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
 
<a class="pop-contact2" type="button" id="contact">3nd link</a>