根据当前悬停对象更改引导弹出消息答案

【问题标题】：Change Bootstrap Popover Message Based on Current Hovered Object根据当前悬停对象更改引导弹出消息
【发布时间】：2013-12-23 00:16:45
【问题描述】：

我有一个列表，我希望在悬停每个元素时显示一个带有唯一消息的弹出框。截至目前，弹出框显示正常，但我无法将弹出框的 html 设为动态文本。

这是我的 HTML：

<ul>
    <li class="step" title="">1</li>
    <li class="step" title="">2</li>
    <li class="step" title="">3</li>
    <li class="step" title="">4</li>
    <li class="step" title="">5</li>
</ul>

咖啡脚本：

$(".step").popover
    html: true
    placement: 'bottom'
    trigger: 'hover'
    content: ->
      html = "This li text is " + $(".step".prev.text)

【问题讨论】：

需要有一个选择器，就像一个分隔每个步骤的 ID。
不能按顺序做？ popover 元素总是在触发它的任何元素之后显示——因此理论上，您可以找到触发事件的元素，然后根据它使其动态化。
@ElijahMurray 你想显示什么exaclty？
@PSL 我想显示当前步骤的编号。我最终写了一个switch 语句来显示一条独特的消息，但出于测试目的，这很有效。谢谢！
@ElijahMurray 好吧。更新了答案...

标签： javascript jquery ruby-on-rails twitter-bootstrap coffeescript

【解决方案1】：

使用 JS，您可以在 content 属性的函数中使用 this，它将代表当前的 li，您可以使用它来选择相关内容：

$(".step").popover({
    html: true,
    placement: 'bottom',
    trigger: 'hover',
    content: function(){
      return "This li text is " + $(this).text(); //user this as context which will be the current `li`
    }
});

可能使用 CoffeeScript（不完全确定咖啡语法）：

$(".step").popover
  html: true
  placement: "bottom"
  trigger: "hover"
  content: ->
    "This li text is " + $(this).text()

Demo

【讨论】：

【解决方案2】：

使用选择器选项

    function updateCodeView() {
     $('#with-selector-code').toggle(usingSelectorOption());

Bootstrap 在这里提供了一个很好的例子。请务必勾选“使用选择器选项”

例子：

http://jsfiddle.net/fScua/

在示例视图中，检查“使用选择器选项”以查看其工作原理。

【讨论】：