每次我使用$(类).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运行时，都会用跨度包装每个h2元素。然后，对于h2标记中的每个br标记，它都会在前后添加跨度。

要做到这一点，更可靠的方法是将标题放在适当的位置，并使用正确的CSS。但是标题是隐藏的(display:none;)。然后，您可以将数据加载到它们中，并在ajax回调完成/成功时执行$(".caption").show();。

祝你好运:)