【问题标题】:Get ID of the element that was Bootstrap popover-ed获取被 Bootstrap 弹出的元素的 ID
【发布时间】:2016-12-08 11:16:12
【问题描述】:

我有以下代表 html 元素字符串的 Javascript 代码:

html = '<tr>' +
'<td class="editMap" data-mode="option" data-wsid="'+row.option_id+
'" data-map="'+row.mapping_id+'" id="option-'+row.option_id+'">'+
'<span title="Options Mapping" data-toggle="popover" data-placement="left"style="cursor:pointer;">'+value+
'</span></td>'+'</tr>';

html 变量实际上是在一个循环中。我也有显示特定 div 详细信息的弹出框代码

$('[data-toggle="popover"]').popover({
  html: true, 
  container: body,

  content: function() {
    return $('#popover-content').html();
  }
});

<div id="popover-content" class="row" style="display:none;">
  <input  class="btn btn-xs btn-info" type="submit" value="Yes" style="display: inline-block; vertical-align: top;"/>
  <input  class="btn btn-xs btn-primary" type="submit" value="No" style="display: inline-block; vertical-align: top;"/>
</div>

我想要的是实际获取弹出元素的 id,在本例中由 "option-'+row.option_id+'" 表示。我尝试了以下方法,但似乎不起作用:

$('[data-toggle="popover"]').each( function() {
  $(this).popover({ 
    html : true,
    content: this.id,
    console.log(this.id);
  });
});

请帮我获取身份证。这可能是一个初级问题,但我是 Javascript 新手

【问题讨论】:

  • 试试$(this).attr('id')
  • this 是对 dom element 的引用,其中 $(this) 是一个 jquery 对象。

标签: javascript jquery html twitter-bootstrap popover


【解决方案1】:

您需要使用$(this) 而不是仅使用this 访问当前元素。

$('[data-toggle="popover"]').each( function() {
      //try doing console log out of popover.
      console.log($(this).attr('id'));
      $(this).popover({ 
                        html : true,
                        content: $(this).attr('id')
                     });
});

【讨论】:

    【解决方案2】:

    $() 是 jQuery 构造函数。

    this 是对调用的 DOM 元素的引用。

    $(this) 中,您只是将this 作为参数传递给$(),以便您可以调用jQuery 方法和函数。

    因此,您的代码将如下所示:

    $('[data-toggle="popover"]').each( function() {
        $(this).popover({ 
            html : true,
            content: $(this).attr('id'),
            console.log(this.id);
        });
    });
    

    【讨论】:

      猜你喜欢
      • 2014-11-30
      • 1970-01-01
      • 2012-04-12
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2020-06-03
      • 1970-01-01
      相关资源
      最近更新 更多