Question

我想在链接后添加一张图片，其中包含与链接相同的网址。使用下面的AJAX代码，我得到了这个结果：

<a href="images/Draadloos.png" data-lightbox="gallerij"></a>

我想要的例子：

<a href="images/Draadloos.png" data-lightbox="gallerij"><img src="images/Draadloos.png" id="ResizePicture" Alt="Draadloos" /></a>

AJAX：

$.ajax({
    url: 'xml/images.xml',
    dataType: 'xml',
    success: function(data){
        console.log(data);
        $(data).find('images image').each(function(){
            var url = $(this).find('url').text();
            $('.timeline ').append(
                $('<a />', {
                    href: url,
                    "data-lightbox": "gallerij"

                    }));
            });
        },
    error: function(){
        console.log('Fotos zijn niet ingeladen');
        }
});

HTML：

<div class="timeline"></div>

Answer 1

要添加图像，您可以调用以下内容：

$('.timeline ').append( 
        $('<a />', { href: "foo.png", html: "<img src=foo.png title=FooImg />"}
));

为了帮助您更多的演示小提琴或codepen.io将是有帮助的。例如 - 从ajax调用返回的内容 - 意味着内部数据是什么？ - html内部数据如何看起来像find（'images image'）给出匹配

Answer 2

你做得很好，你只需要将image元素附加到你的标签上：

$.ajax({
    url: 'xml/images.xml',
    dataType: 'xml',
    success: function(data){
        console.log(data);
        $(data).find('images image').each(function(){
            var url = $(this).find('url').text();
            $('.timeline ').append(
                $('<a />', {
                    href: url,
                    "data-lightbox": "gallerij"

                    }).append('<img />', {
                        src: url, 
                        id:"ResizePicture", 
                        alt: url // see my note below on this...
                    }));
            });
        },
    error: function(){
        console.log('Fotos zijn niet ingeladen');
        }
});

对于图像的alt属性，您可以从XML中提取另一个值来填充它，或者您可能需要使用其他方法，可能需要使用URL上的正则表达式，如果它们是总是一样的模式...

ajax调用附加到链接

2 个答案: