Tôi có thể sử dụng "div" trong Popover của Twitter bằng nhiều nút bằng cách nào?

Question

Giải pháp này là ok cho một trường hợp nút: Is it possible to use a div as content for Twitter's Popover

Nhưng trong trang của tôi, tôi có một loạt các cửa sổ bật lên (nói 50-100).
Vì vậy, tôi cần phải sửa đổi giải pháp này.

này wa @ Javi của giải pháp:

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

Mỗi nút của tôi có id riêng của mình.

<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> 

Vậy làm cách nào tôi có thể viết lại đoạn mã javascript này để bao gồm tất cả các nút của mình?

Answer 1

Store id của div chứa html popover bên trong thuộc tính rel của một yếu tố

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

Và sau đó nhận được rel của neo nhấp chuột bên nghe nhấp chuột (không chắc chắn cách các cửa hàng phương pháp popover nó, nhưng tôi chắc chắn nó có):

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

Answer 2

Chỉ cần tự mình chiến đấu với điều này. Bạn cần đặt id trong phần tử kích hoạt cửa sổ bật lên. Sử dụng một thuộc tính dữ liệu tùy chỉnh như vậy (gọi là 'data-id'):

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

Sau đó, bạn có thể sửa đổi javascript bạn một chút để lấy các giá trị thuộc tính dữ liệu id lập trình:

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

Answer 3

Đối với tôi nó đã làm được

data-id="#popover_div1" 

trong HTML cho nút (có dấu # cho địa chỉ id của div).

Answer 4

Nếu bạn không muốn làm ô nhiễm yếu tố nguồn của bạn với một data-* thuộc tính, đây là một cách đơn giản và tổng quát để sử dụng thuộc tính data-content dưới dạng văn bản hoặc CSS selector:

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

Bạn có thể bây giờ sử dụng thuộc tính data-content với một giá trị văn bản:

<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> 

... hoặc sử dụng các thuộc tính data-content với một giá trị chọn 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> 

Bạn có thể kiểm tra giải pháp này ở đây: http://jsfiddle.net/almeidap/eX2qd/

... hoặc ở đây, nếu bạn đang sử dụng Bootstrap 3.0: http://jsfiddle.net/almeidap/UvEQd/ (lưu ý tên thuộc tính data-content-target!)

Answer 5

Bạn có thể làm điều đó mà không cần nút thêm thuộc tính như thế này:

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(); 
    } 
});