Создание динамического всплывающего окна из функции

#javascript #php #jquery #html #twitter-bootstrap

#javascript #php #jquery #HTML #twitter-bootstrap

Вопрос:

Я работаю над социальной сетью translation, и в сообщениях мне нужно показывать статистику голосов за каждое предложение (аналогично ответам в stackoverflow), поэтому мне нужно создавать всплывающее окно всякий раз, когда пользователь наводит курсор на ярлык с динамическим контентом.

     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>  

любая помощь?

Ответ №1:

Описание

Вы выбираете свой html-тег с переменной id, вместо этого используйте хэш «#» для выбора идентификатора jquery.

Код

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

Комментарии:

1. Хотя это решило мою первоначальную проблему, всплывающее окно действовало странно, в любом случае, большое спасибо за вашу доброту 🙂

Ответ №2:

Основываясь на триггере, который у вас есть в вашей функции всплывающего окна, я предполагаю, что вы просто хотите, чтобы всплывающее окно реагировало на элемент, и вы не обязательно хотите, чтобы он был в функции. Если я прав, то этот пример JSFIDDLE должен делать именно то, что вам нужно

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

Также в этой обновленной скрипке я правильно переключаю ваше всплывающее окно:
Обновленная скрипка