4

Boostrap を使用して単一ページの Web サイトをコーディングしています。グラフでは、マウス ホバーにいくつかの popvers があり、それは正常に動作します。問題は、ポップオーバーに複数のスタイルを持たせようとするときです。つまり、一部のポップオーバーは黄色である必要があり、他は青色である必要があります。css で新しいスタイルを追加して、それを html で置き換えようとしました (つまり、「popover2」)、またはインラインcssを使用していますが、ポップオーバースタイルはポップオーバースクリプトに関連付けられており、変更が表示されません. 私が考える「問題」はここから始まります：

$.fn.popover = function (option) {
    return this.each(function () {
      var $this = $(this)
        , data = $this.data('popover')
        , options = typeof option == 'object' && option
      if (!data) $this.data('popover', (data = new Popover(this, options)))
      if (typeof option == 'string') data[option]()
    })
  }

  $.fn.popover.Constructor = Popover

  $.fn.popover.defaults = $.extend({} , $.fn.tooltip.defaults, {
    placement: 'right'
  , trigger: 'click'
  , content: ''
  , template: '<div class="popover"><div class="arrow"></div><div class="popover-inner"><h3 class="popover-title"></h3><div class="popover-content"><p></p></div></div></div>'
  })

}(window.jQuery);

.js を複製して popover2 を新しいオブジェクトとして使用することさえ試みました... まさか... 誰でも私を助けることができますか? ありがとう。

4

1 に答える 1

3

プレーンな HTML/CSS で非常に簡単に実行できます。ポップオーバーはリンク/ボタンの直後に表示されます。つまり+、CSS のセレクターでターゲットにすることができます。ここであなたが試すことができる何か：

HTML : 

<a rel="popover" data-color="yellow" data-etc="...">My popover</a>

CSS : 

[rel=popover][data-color=yellow] + .popover {
    background: yellow;
}

編集：そしてそれはうまくいきます、ここにフィドルがあります。

于 2012-11-07T14:07:48.063 に答える