Question

我正在尝试将XML文件中的一系列图像添加到html中，并将其显示为幻灯片。我有幻灯片代码工作，但只添加了第一张图片。图像被称为＆＃34; Slide1.png＆＃34;，＆＃34; Slide2.png＆＃34;等等。但是，当我用$('body').append('<div id="container" />');和$('body').append('<div />');替换$('#container').append($(pic));时使用$('div').append($(pic));它有效，但我不确定原因。

jQuery代码如下：

<script>
 $(document).ready(function()
      {
        var temp = "";
        var i = 1;
        $.get('myData.xml', function(d){

        $('body').append('<div id="container" />');

        var fcn = $(d).find('picture').each(function(){

            var $image = $(this);
            var title = $picture.attr("title");
            var imageurl = $picture.attr('imageurl');
            var time_duration = $picture.attr("time_duration");

            var pic = '<li> <img class="bookImage" alt="" src="' + "images/Slide" + i + ".png "+ '" /> </li>';
            $('#container').append($(pic));
            i++;


        });
    });

// Slideshow Code
// ...
});
</script>

Answer 1

我已经为您的示例代码提出了一些可能有助于解决此问题的建议。

//adding a ul to contain the li, this may not be needed
$('body').append('<div id="container"><ul/></div>');

    //add your index variable to the each function if it is needed
    var fcn = $(d).find('picture').each(function(i){

        //variable was previously named $image, but was not used.
        var $picture= $(this);
        var title = $picture.attr("title");
        var imageurl = $picture.attr('imageurl');
        var time_duration = $picture.attr("time_duration");

        //make pic a jquery variable to simplify attribute setting
        var pic = $('<li> <img class="bookImage" alt=""/> </li>');
        pic.attr(src,imageurl); //prefix with path if needed

        //add results to the ul
        $('#container ul').append(pic);
     });

从xml动态添加图像到jQuery

1 个答案: