6

リンクのhtmlは次のとおりです。

 <a href="javascript:void(0);" style="font-size: 3em; color: #222" class="popover-test" id="directNavPrev" data-title="Previous Result Row" data-content="Previous Result Row">
&laquo;</a>

はい、初期化するために.popover（）を呼び出していますが、ポップオーバーは問題なく機能します。コンテンツを問題なく更新できます。タイトルだけではありません。「prev.data（'title'、'new title'）」を試し、さらに「prev.popover（{title：'new title'}）;」を再初期化しようとしました。サイコロなしで...ありがとう。

 function SetDirectNavigationPlaceholder() {
    //debugger;
    var item = $("#movementType :selected").val();
    var direct = $('#directNavigation');
    var prev = $('#directNavPrev');
    var next = $('#directNavNext');
    switch (item) {
        case "result":
            $('#bookTypeSection').addClass('hide');
            direct.val('Result Row from 1 - 150');
            prev.attr('data-title', "Previous Result Row");
            next.attr('data-title', "Next Result Row");
            prev.attr('data-content', "Check it! this will contain the information for the previous result<table><tr><td>blah</td><td>blah</td></tr><tr><td>blah</td><td>blah</td></tr><tr><td>blah</td><td>blah</td></tr><tr><td>blah</td><td>blah</td></tr></table>");
            next.attr('data-content', "Check it! this will contain the information for the next result<table><tr><td>blah</td><td>blah</td></tr></table>");
            break;
        case "instrument":
            $('#bookTypeSection').addClass('hide');
            direct.val('Instrument #');
            prev.attr('data-title', "Previous Instrument #");
            next.attr('data-title', "Next Instrument #");
            prev.attr('data-content', "Check it! this will contain the information for the previous <b>instrument</b><table><tr><td>blah</td><td>blah</td></tr></table>");
            next.attr('data-content', "Check it! this will contain the information for the next <b>instrument</b><table><tr><td>blah</td><td>blah</td></tr></table>");
            break;
        case "bookpage":
            $('#bookTypeSection').removeClass('hide');
            direct.val('Book/Page');
            prev.attr('data-title', "Previous Book/Page");
            next.attr('data-title', "Next Book/Page");
            prev.attr('data-content', "Check it! this will contain the information for the previous <b>book/page</b><table><tr><td>blah</td><td>blah</td></tr></table>");
            next.attr('data-content', "Check it! this will contain the information for the next <b>book/page</b><table><tr><td>blah</td><td>blah</td></tr></table>");
            break;
    }
    direct.css('color', '#aaa').not('#directNavigationHeader');
}
4

4 に答える 4

21

それを行う最も簡単な方法はこれです：

     var newTitle = "Here's my new title";
     $('#MyExample').attr('data-original-title', newTitle);

お役に立てば幸いです。

于 2013-07-25T17:30:28.500 に答える
2

Twitter-bootstrapはdivポップオーバーをターゲットにするための手段を維持していないようです。そのため、ヘッダーを変更してタイトルを変更することはできません。ただし、この記事が役立つ場合があります。

これが、いじることができるjsfiddleです。

そして、それをいじることができない人のためのコード。:-)

HTML：

<div style="padding-top: 45px;">
    <a data-content="Original Content for Popover" data-original-title="Popover Title" data-placement="right" href="#" class="btn danger" id="popover-link" rel="popover">Rollover</a>
</div>​

JavaScript：

$('#popover-link').popover({title: function() {return 'new title';}});
$('#popover-link').attr("data-content", "New Content for Popover");
$('#popover-link').setTitle('new title');​
于 2012-07-25T19:42:32.277 に答える
1

その猫の皮を剥いだと考えてください！

これが取引です。bootstrap.jsファイルには、呼び出しているにもかかわらずgetTitle（）のメソッドがないようです。だから私はそれを追加しました。楽しみ。

/* NOTE: POPOVER EXTENDS BOOTSTRAP-TOOLTIP.js
 ========================================== */

Popover.prototype = $.extend({}, $.fn.tooltip.Constructor.prototype, {
  constructor: Popover, setContent: function () {
  //debugger;

  var $tip = this.tip()
    , title = this.getTitle() // didn't exist
    , content = this.getContent()

  $tip.find('.popover-title')[this.isHTML(title) ? 'html' : 'text'](title)
  $tip.find('.popover-content > *')[this.isHTML(content) ? 'html' : 'text'](content)

  $tip.removeClass('fade top bottom left right in')
}

, hasContent: function () {
  return this.getTitle() || this.getContent()
}

 , getContent: function () {
  var content
    , $e = this.$element
    , o = this.options

  content = $e.attr('data-content')
    || (typeof o.content == 'function' ? o.content.call($e[0]) : o.content)

  return content
}

 , getTitle: function () { // does now
  var title
    , $t = this.$element
    , n = this.options

  title = $t.attr('data-title')
    || (typeof n.title == 'function' ? n.title.call($t[0]) : n.title)

  return title
}

, tip: function () {
  if (!this.$tip) {
      this.$tip = $(this.options.template)
  }
  return this.$tip
}

})


何らかの理由で実際の「title」属性を取得できないため、変更する場合は「data-title」を使用する必要があります。

于 2012-07-26T12:34:20.803 に答える
1

これは私のために働いた

$("#mylink").data()["bs.popover"].config.title = "New Ttile";
$("#mylink").data()["bs.popover"].config.content = "<p>New Content</p>";

また

$("#mylink").data("bs.popover").config.title = "New Ttile";
$("#mylink").data("bs.popover").config.content = "<p>New Content</p>";
于 2019-09-24T21:00:55.510 に答える