如何从 prettyPhoto 悬停中删除 <br>？

Question

在我的网站上，我有几个漂亮的照片画廊，我注意到当鼠标悬停在照片上时，所有这些画廊都会显示照片的“标题”标签。这包括一些<br> 标签，然后显示在悬停中，看起来很糟糕。我已经搜索并尝试了对 jquery 的一系列更改，但找不到修复程序。有谁知道如何从悬停中删除<br>？

html的一个例子是：

<article class="span3 box3">
  <div class="thumb-pad4 maxheight">
    <div class="thumbnail">
      <figure><a href="img/p1.jpg" alt="job | Person 1" rel="prettyPhoto[gallery3]" title="
<br>
<br>
<br>
Person1 joined __ in 2015 as a ___.  In this role, ...
<br>
<br>
Person 1 graduated from ____ and wishes he were better at code> 
<img src="img/p1.jpg" alt="job | p1">
</a>
</figure>
  <div class="caption">
    <a href="#">Person 1<br>
Job Function</a>                                    
  </div>
 </div>
</div>
</article>

悬停时出现的是：

 <br>
 <br>
 <br>
Person1 joined __ in 2015 as a ___.  In this role, ...
<br>
<br>
Person 1 graduated from ____ and wishes he were better at code

Answer 1

当您单击或将鼠标悬停在照片上时，PrettyPhoto 使用属性title 为照片添加标题。

您需要在页面中添加一些 CSS，以便在标题以“点击模式”显示时在标题上方和下方添加间距。从 prettyPhoto 的工作原理来看，标题文本放在 div 和 class="pp_description" 中。

因此，从您的 HTML 中删除所有 <br> 标记，并添加 CSS 规则：

.pp_description {
    margin-top: 3em;
    margin-bottom: 2em;
    /* line-height: 3em; if you want spacing between each line of text in the caption */
}

Answer 2

尝试将str.replace() 与正则表达式一起使用（没有它，您只会替换第一个匹配项。您需要一个“贪婪的正则表达式”）

RegEx

例如：

<script>
    $('.my-class')
        .on('mouseenter', function() {
            var originalTitle = $(this).attr('title');

            $('.my-class').attr('data-original-title', originalTitle);
            $('.my-class').attr('title', title.replace(/<br>/g,''));
        })
        .on('mouseleave', function() {
            var originalTitle = $(this).attr('data-original-title');

            $('.my-class').attr('title', originalTitle);
        });
</script>