jquery - 每次我使用 $.(class).loaded(); 时，我图片上的标题都会错位

Question

我有一个缩略图，悬停时它会显示标题。

HTML

<div class="img_thumb_holder float-l">
    <img class="img_thumb" src="image/image1.jpg" alt="portfolio">
    <h2 class="caption">jane<br />Featured Portfolio1</h2>
</div>

CSS

.caption{   
height:90px;
margin:0px;
margin-left:-30px;
}

.container .img_thumb_holder h2 span { 
    color: white; 
    font: bold 20px/30px Helvetica, Sans-Serif; 
    letter-spacing: -1px;  
    padding: 10px; 
}

.container .img_thumb_holder h2 span.spacer {
    padding:0 5px;
}

JS

$(function() {
    $("h2")
    .wrapInner("<span>")
    $("h2 br")
    .before("<span class='spacer'>")
    .after("<span class='spacer'>");
});

我正在使用 ajax 加载 3 个不同的页面，所有页面都显示缩略图，这段代码在 3 个页面之间共享，但是每次我 $.load 另一个页面时，我的标题位置都会关闭，我加载的页面越多，更多它熄灭。有什么想法吗？

Answer 1

如果不查看完整代码，很难看出。但是每次你的 JS 运行时，你都会用一个 span 包装每个 h2 元素。然后对于 h2 标签内的每个 br 标签，它会在前后添加跨度。

执行此操作的一种更可靠的方法是使用正确的 CSS 准备好标题。但是字幕是隐藏的 (display:none;)。然后，您可以将数据加载到它们中，并在 ajax 回调完成/成功时执行 $(".caption").show();。

祝你好运:)