Erstellen dynamisches Popover von Funktion

Question

Ich arbeite an der Übersetzung soziales Netzwerk, und in den Posts muss ich einige Statistiken über Stimmen für jede Vorschläge zeigen (ähnlich wie Antworten in Stackoverflow), so muss ich Popover erstellen, wenn der Benutzer schweben auf dem Etikett mit dynamischem Inhalt.

function Popx(id) 
 
{ 
 
    $(id).popover({//here is my problem, I want dynamic id not static 
 
     html: true, 
 
     trigger: 'hover', 
 
     content: function() { 
 
      return $.ajax({url: 'ajax/ajaxpopoverstat.php?uid=1', 
 
       dataType: 'html', 
 
       async: false}).responseText; 
 
     } 
 
    }).hover(function (e) { 
 
     $(this).popover('toggle'); 
 
    }); 
 
}

<div class="label label-default" style="background-color: orange; font-size: x-large" data-poload="ajax/ajaxpopoverstat.php" id="xword" onmouseover="Popx(this.id)">Suggested Word</div>

jede mögliche Hilfe?

Answer 1

Basierend auf den Auslöser Sie in Ihrer popover Funktion habe ich Sie nur die popover auf ein Element reagieren wollen bin zu raten, und Sie müssen es nicht in einer Funktion wollen. Wenn ich richtig bin dann this JSFIDDLE example should do exactly what you need

$(document).ready(function(){ 
    $('div.label').popover({ //here is my problem, I want dynamic id not static 
     html: true, 
     trigger: 'hover', 
     content: function() { 
     return "Skittles and ids of: " + $(this)[0].id; 
     } 
    }).hover(function(e) { 
     $(this).popover('toggle'); 
    }); 
}); 

Auch in dieser aktualisierten Geige ich Ihre popover bekomme richtig wechseln: Updated Fiddle

Answer 2

Beschreibung

Sie Ihren HTML-Tag mit id Variable anstelle dieser nutzen "#" hash den jquery ID-Selektor auswählen.

-Code

function Popx(id) { 
     // make use of ID selector 
     $('#' + id).popover({ 
     html: true, 
     trigger: 'hover', 
     content: function() { 
      return $.ajax({url: 'ajax/ajaxpopoverstat.php?uid=1', 
       dataType: 'html', 
       async: false}).responseText; 
     } 
     }).hover(function (e) { 
     $(this).popover('toggle'); 
     }); 
    }