0

データをロードしてdivに追加するために使用しているxml関数があります。css と jQuerydiv.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>

このコードは、すべての画像を 1 つの div に配置するのではなく、画像ごとに 1 つの div を配置すると機能します。

$("#thumbs").append('<div class="thumb"><img src="Styles/images/' + image + '" width="64" height="64" /></div>');

ただし、2 番目<br />の画像は表示されません。

私の質問は、なぜ 1 つの div とその div に画像がある場合にdiv.thumb img機能しないのかということです。

4

1 に答える 1

0

append 関数を誤解していると思います。有効な 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);
});
}

追加機能はテキスト文字列ではなく要素を追加するため、子としてではなく div.thumb の兄弟として画像を追加しています

于 2013-02-20T16:40:59.310 に答える