使用 jquery .load 更改该 DIV 中的 HTML 时将初始 HTML 加载到 DIV答案

【问题标题】：Load initial HTML into DIV when using jquery .load to change HTML in that DIV使用 jquery .load 更改该 DIV 中的 HTML 时将初始 HTML 加载到 DIV
【发布时间】：2014-10-17 20:42:39
【问题描述】：

我有一些基本的 jquery 正在改变单个 div 的内容。我唯一想不通的是如何在页面首次加载时将四个外部 HTML 文件之一（即lookbook20141217.HTML）显示为默认值。现在，在单击“按钮”之一之前，容器 DIV“lookBookWindow”是空的。

JSFIDDLE

HTML

<div id="lookBookMain">

<div id="lookBookWindow"></div>

<input id="lookbook20141217" class="thumbnail rm" type="image" src="thumbnails/20141217.jpg" alt="maurices lookbook20141217" width="220" height="220" border="0" />
<input id="lookbook20141114" class="thumbnail rm" type="image" src="thumbnails/20141114.jpg" alt="maurices lookbook20141114" width="220" height="220" border="0" />
<input id="lookbook20141018" class="thumbnail rm" type="image" src="thumbnails/20141018.jpg" alt="maurices lookbook20141018" width="220" height="220" border="0" />
<input id="lookbook20141016" class="thumbnail" type="image" src="thumbnails/20141016.jpg" alt="maurices lookbook20141016" width="220" height="220" border="0" />

</div>

CSS

#lookBookMain {
    width: 940px;
    margin: 0px auto;
    padding: 0px;
    position: relative;
}

#lookBookWindow {
    width: 940px;
    height: 580px;
    margin: 0px;
    padding: 0px;
}

.thumbnail {
    width: 220px;
    height: 220px;
    margin: 0px;
    padding: 20px 0px 0px 0px;
    position: relative;
    float: left;
}

input.thumbnail:focus {
    outline-width: 0;
}

.rm{
    margin-right: 20px;
}

JQUERY

$('input[type="image"]').click(function() {
    var pageName = this.id;
    $('#lookBookWindow').load(pageName + '.html');
});

我觉得它应该只是 jquery 中的另一行，但我没有在网上找到我需要的东西。提前致谢！

【问题讨论】：

标签： jquery html load

【解决方案1】：

如果您想加载特定页面，只需在点击处理程序之外 .load() 即可。

另一种选择是触发对第一张图片的点击：

$('input[type="image"]').click(function() {
    var pageName = this.id;
    $('#lookBookWindow').load(pageName + '.html');

}).first().click();

【讨论】：

看起来这个选项会更有活力一点，因为它总是会触发 first “按钮”，无论按钮是否被添加/删除/重新排列。如果我理解正确，这意味着在为容器 DIV 添加按钮和 HTML 文件时我不必调整 jquery ......对吗？
没错。关于面向未来的主题，我建议为这些输入提供一个通用类并在您的选择器中使用它。目前，如果您添加不应包含在此逻辑中的图像输入，则会遇到问题。
感谢您的提示。我已经在“输入”上有一个通用的“缩略图”类，所以我只是将那个类添加到选择器中： $('input[type="image"], .thumbnail') 当然，请随时让我知道我是否做错了。
该选择器将选择匹配 input[type="image"] 的元素，以及匹配 .thumbnail 的元素。你想要$('input[type="image"].thumbnail') 或只是$('.thumbnail') 可能会工作。
明白了。再次感谢！

【解决方案2】：

我觉得它应该只是 jquery 中的另一行

是的。外部：

$('input[type="image"]').click(function() {
    var pageName = this.id;
    $('#lookBookWindow').load(pageName + '.html');
});

添加：

$('#lookBookWindow').load('lookbook20141217.html');

使用您要首先加载的任何 HTML 文件。

【讨论】：

是的，这就是我所缺少的。谢谢！