0

私はブートストラップポップオーバーをWordpressループ内で機能させようとして成功しませんでしたが、これは私がこれまでに持っているものです：

<?php while($have_posts()): $the_post();
  $excerpt = strip_tags(get_the_excerpt());?>

  <a class="<?php echo the_ID()?>" href="<?php echo the_permalink();?>"><?php echo the_title();?></a>

  <script>
  jQuery('.<?php echo the_ID()?>').mouseenter(function(){
    jQuery(this).popover({
      html: true,
      title: '<?php echo the_title();?>',
      trigger: 'manual',
      placement:'top',
      content:'<?php echo $excerpt;?>'
    }).popover('show');
  });
  </script>
<?php endwhile;?>

これは私が期待するものを印刷します

<a class="5598" href="http://mysite.oom/post/">Post Title</a>

<script>
jQuery('.5598').mouseenter(function(){
  jQuery('.5598').popover({
    html: true,
    title: 'Post Title',
    trigger: 'manual',
    placement:'top',
    content:'Post Excerpt'
  }).popover('show');
});
</script>

etc...

ただし、ポップオーバーがホバーに表示されず、スクリプトエラーが発生しないため、ポップオーバーが機能しない理由がわかりません。jQuery、bootstrap.js、bootstrap.cssが含まれています。ページの読み込み。どんな助けでも大歓迎です！

ありがとう

4

1 に答える 1

2

数字で始まるクラスと ID は機能しません。

クラスを数値として指定すると、次のことがよく知られています。

<div class="1234">...</div>

うまくいきません。あなたの場合、次のようになります。

<script>
jQuery('.5598').mouseenter(function(){
  jQuery('.5598').popover({
    html: true,
    title: 'Post Title',
    trigger: 'manual',
    placement:'top',
    content:'Post Excerpt'
  }).popover('show');
});
</script>

クラスは純数です。5598. うまくいきません。したがって、次のように置き換えてみてください。

<a class="p5598" href="http://mysite.oom/post/">Post Title</a>

<script>
jQuery('.p5598').mouseenter(function(){
  jQuery('.p5598').popover({
    html: true,
    title: 'Post Title',
    trigger: 'manual',
    placement:'top',
    content:'Post Excerpt'
  }).popover('show');
});
</script>

もう 1 つ疑わしいのは、これ.popover()は関数であり、インスタンス化のように使用されるということです。したがって、 の下には渡さないでください.mouseenter()。スクリプト全体を次のように置き換えます。

<script>
jQuery(document).ready(function(){
  jQuery('.p5598').popover({
    html: true,
    title: 'Post Title',
    trigger: 'manual',
    placement:'top',
    content:'Post Excerpt'
  })
  jQuery('.p5598').hover(function() {
    jQuery('.p5598').popover('show');
  }, function(){
    jQuery('.p5598').popover('hide');
  });
});
</script>
于 2013-01-04T06:11:12.130 に答える