Question

所以我创建了一个带有动态div的图像库，并希望向div添加一个onclick事件，但是我收到错误“ReferenceError：pag1未定义”我做错了什么。以下是我的代码。

var btnInfo=[
    {
        img: 'images/thumbs/img1.jpg',
        id: 'btn1',
        title: 'Kingsman',
        projectUrl: 'pag1.html'
    },
    {
        img: 'images/thumbs/img2.jpg',
        id: 'btn2',
        title: 'Title Two',
        projectUrl: 'page2.html'
    }
]

for(var i=0; i<btnInfo.length; i++){
  $('.thumbWrapper .container ul' ).append('<li id="'+btnInfo[i].id+' "    onclick="getProject('+btnInfo[i].projectUrl+' )"><div class="view view-tenth"><img src="'+btnInfo[i].img+'"><div class="mask"><h2>'+btnInfo[i].title+'</h2></div></div></li>');
}

function getProject(url){
        var w = url;
        console.log("url " + url);
}

Answer 1

您在onclick处理程序中输出的参数没有引号，应为

... onclick="getProject(\''+btnInfo[i].projectUrl+'\' )"><div class="view view-tenth">
//                       ^^                        ^^ needs escaped quotes

但为什么不使用jQuery

$('.thumbWrapper .container ul' ).append(
    btnInfo.map(function(item) {
        return $('<li />', {
            id : item.id,
            on : {
                click : function() {
                    getProject(item.projectUrl)
                }
            }
        }).append(
            $('<div />', {'class' : 'view view-tenth'}),
            $('<img />', {src : item.img}),
            $('<div />', {'class' : 'mask'}).append(
                 $('<h2 />', {text : item.title})
            )
        )
    })
)

FIDDLE

将URL传递给动态div

1 个答案: