添加链接＆amp;动态div块的图像

Question

目前正在开发动态块。我已经为动态div-block创建了代码，但是当我尝试为动态块添加动态图像和链接时，它无法正常工作。

输出如下

这是dyanmic div块的代码

var data = ["Extension", "something else", "more","some data1", "something else1", "more1"];
$.each(data, function(i, v){
    $("#divId").append('<div class="single" id="my_test_' + (i+1) + '">'
                       +'<div class="any_name"> '+ v +' </div></div>');
});

这是我需要的解释。

当我尝试为div添加Image时    image1.png 我需要添加整个div块的链接。

这是小提琴Link

Answer 1

您需要一个包含对象的数组。每个对象都有文本，图像和链接属性。您将动态创建所有元素并附加它们。锚元素（链接将作为单个div的包装，以便可以点击所有div内容）。在div中，您可以附加图像和文本。

当然我并没有为你设计风格，所以你必须自己做。你只需要更改数据（放置一些正确的图像路径和正确的文本链接）和类，并做一些CSS样式。

这是我的工作小提琴：http://jsfiddle.net/5j2xgx81/2/

<强> HTML：

<div id="divId"></div>

<强>使用Javascript：

var data = [
    {
        text: 'some data',
        link: 'http://www.google.com/',
        imagePath: 'some/path/img.jpg'
    },
    {
        text: 'something else',
        link: 'http://www.facebook.com/',
        imagePath: 'some/path/img2.jpg'
    }
];

$.each(data, function(key, value){
    var newDiv = $('<div/>')
                    .addClass('single')
                    .attr('id', 'my_test_' + (key + 1));

    var textInsideDiv = $('<span/>')
                            .addClass('blabla')
                            .text(value.text);

    var imageInsideDiv = $('<img/>')
                    .addClass('someclass')
                    .attr('src', value.imagePath);

    var linkWrapper = $('<a/>')
                 .addClass('someotherclass')
                 .attr('href', value.link);

    newDiv
        .append(imageInsideDiv)
        .append(textInsideDiv);
    linkWrapper.append(newDiv);

    $('#divId').append(linkWrapper);
});

祝你好运：）