我有一个用于加载数据并附加到 div 的 xml 函数。css 和 jQuery fordiv.thumb img
没有选择图像。
JavaScript:
$(document).ready(function () {
function loadfail() { alert("Error: Failed to read file!"); }
//Load xml data
function parse(document) {
$("#thumbs").append('<div class="thumb">');
$(document).find("entry").each(function () {
var image = $(this).find('image').text();
$("#thumbs").append('<img src="Styles/images/' + image + '" width="64" height="64" />');
});
$("#thumbs").append('</div>');
$('div.thumb img').click(function () {
$('#expandedimage').slideToggle(1000);
});
}
$.ajax({
url: 'appdata/data.xml', // name of file with our data
dataType: 'xml', // type of file we will be reading
success: parse, // name of function to call when done reading file
error: loadfail // name of function to call when failed to read
});
});
CSS:
div.thumb { float:left ; padding: 1px; }
div.thumb img { border: 2px solid white; }
HTML 标记:
<div id="body">
<div id="expandedimage">
Toggled Image
</div>
<hr />
<div id="thumbholder">
<div id="thumbs">
<!-- image(s) here! -->
</div>
<hr />
</div>
</div>
该代码在每个图像放置一个 div 时有效,而不是将所有图像放在一个 div 中:
$("#thumbs").append('<div class="thumb"><img src="Styles/images/' + image + '" width="64" height="64" /></div>');
但是,第二个<br />
没有出现图像。
那么我的问题是,为什么当我有一个 div 和该 div 中的图像时,div.thumb img
它不起作用。