Jak mogę użyć "div" w Popover na Twitterze z wieloma przyciskami?

Question

To rozwiązanie jest dobre dla jednego przycisku: Is it possible to use a div as content for Twitter's Popover

Ale na mojej stronie mam sporo popoverów (powiedzmy 50-100).
Muszę zmodyfikować to rozwiązanie.

rozwiązanie tego WA @ Javi za:

$(document).ready(function(){ 
    $('.danger').popover({ 
    html : true, 
    content: function() { 
     return $('#popover_content_wrapper').html(); 
    } 
    }); 
}); 

Każdy z moim przycisku ma własny identyfikator.

<a class='danger' data-placement='above' title="Popover Title" href='#'>Click</a> 
<div id="popover_div1" style="display: none"> 
    <div>This is your div content</div> 
</div> 

<a class='danger' data-placement='above' title="Popover Title" href='#'>Click</a> 
<div id="popover_div2" style="display: none"> 
    <div>This is your div content</div> 
</div> 

Więc jak mogę przepisać ten fragment kodu JavaScript, aby pokryć wszystkie moje przyciski?

Answer 1

przechowywać identyfikator div zawierającego html popover wewnątrz atrybutu rel w elemencie

<a rel="popover_div2" ... >click</a> 

A następnie uzyskać rel kotwy kliknięcie wewnątrz click słuchacza (nie wiem, jak się popover sklepów metoda to, ale jestem pewien, że to robi):

var myRel = $(this).attr(rel); 
return $(myRel).html(); 

Answer 2

Wystarczy walczył z tym sam. Musisz umieścić id w elemencie, który uruchamia popover. Użyj atrybutu niestandardowego danych, takich jak tak (o nazwie 'dane-id'):

<a class='danger' data-id="popover_div1" data-placement='above' title="Popover Title" href='#'>Click</a> 

Następnie można zmodyfikować skrypt lekko chwycić wartość atrybutu data-id programowo:

$(document).ready(function(){ 
    $('.danger').popover({ 
    html : true, 
    content: function() { 
     return $($(this).attr('data-id')).html(); 
    } 
    }); 
}); 

Answer 3

Dla mnie to ma daj się

data-id="#popover_div1" 

w HTML dla przycisku (z # adresowania id div).

Answer 4

Jeśli nie chcesz zanieczyścić elementu źródłowego z innym data-* atrybutu, tutaj jest prosta i rodzajowy sposobem użycia atrybutu data-content jako selektor tekstowym lub CSS:

$('[data-toggle="popover"]').popover({ 
    html: true, 
    content: function() { 
     var content = $(this).data('content'); 
     try { content = $(content).html() } catch(e) {/* Ignore */} 
     return content; 
    } 
}); 

można teraz użyć atrybutu data-content z wartości tekstowej:

<a data-toggle="popover" data-title="Popover Title" data-content="Text from data-content attribute!" class="btn btn-large" href="#">Click to toggle popover</a> 

... albo użyć atrybutu data-content o wartości selektora CSS:

<a data-toggle="popover" data-title="Popover Title" data-content="#countdown-popup" class="btn btn-large" href="#">Click to toggle popover</a> 

<div id="countdown-popup" class="hide">Text from <code>#countdown-popup</code> element!</div> 

można przetestować to rozwiązanie tutaj: http://jsfiddle.net/almeidap/eX2qd/

... albo tutaj, jeśli używasz Bootstrap 3.0: http://jsfiddle.net/almeidap/UvEQd/ (uwaga data-content-target przypisują nazwisko!)

Answer 5

Można to zrobić bez dodatkowego przycisku atrybuty tak:

http://jsfiddle.net/isherwood/E5Ly5/

.popper-content { 
    display: none; 
} 

<button class="popper" data-toggle="popover">Pop me</button> 
<div class="popper-content">My first popover content goes here.</div> 

<button class="popper" data-toggle="popover">Pop me</button> 
<div class="popper-content">My second popover content goes here.</div> 

<button class="popper" data-toggle="popover">Pop me</button> 
<div class="popper-content">My third popover content goes here.</div> 

$('.popper').popover({ 
    container: 'body', 
    html: true, 
    content: function() { 
     return $(this).next('.pop-content').html(); 
    } 
});