Question

我有一个xml函数，我用来加载数据并附加到div。 div.thumb img的css和jQuery没有选择图像。

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不起作用。

Answer 1

我认为你误解了追加功能。你应该附加有效的xml / html。尝试沿着这条线的东西。

function parse(document) {

 var containerDiv = $("#thumbs").append('<div class="thumb" />');

  $(document).find("entry").each(function () {
    var image = $(this).find('image').text();          

    containerDiv.append('<img src="Styles/images/' + image + '" width="64" height="64" />');           

  });


containerDiv.find('img').click(function () {

    $('#expandedimage').slideToggle(1000);
});
}

append函数不附加文本字符串而是附加元素，因此您将图像作为兄弟附加到div.thumb而不是作为子项

为什么这个jquery选择器无法识别这些图像

1 个答案: