1

是否可以在比较中使用以下 HTML 代码中的 this.id 的值？

<div id="Kids Bikes" class="album" onClick="javascript:loadPopupContent(this.id)">  
        <img src="images/kidsbikes/1.jpg" class="uitgelicht" >
        <div style="background-color:rgba(240, 124, 0, 0.6)" class="overlay"><p class="overlayx">Kids Bikes</p></div> 
</div>

我正在制作相册。当访问者单击照片时，会显示一个弹出窗口，其中包含用户单击的相册照片的缩略图。此函数用于创建弹出窗口：

function loadPopupContent(id){
//centering with css
centerPopup();
//load popup
loadPopup();
// load content
loadContent(id);

}

loadContent 函数看起来像这样，但它没有做任何事情。我认为这是因为我正在尝试将字符串与 HTML 元素进行比较，但我不确定。当我删除 if (albumname == 'AllroundBikes'){}else{} 语句时，一切正常。

function loadContent(eleId){
if (eleId != 0){

    var albumnaam = eleId.replace("-","");
    var albumname = albumnaam.replace(" ","");

    if (albumname == 'AllroundBikes'){ // 5 foto's
        $("#popupContent").html("<h1>" + eleId + "</h1>" +
        "<a class='thumbnail' href='#thumb'><img src=images/" + albumname + "/1.jpg class='uitgelichtvak' /><span><img src=images/" + albumname + "/1.jpg height='415' width='750'/></a>" + 
        "<a class='thumbnail' href='#thumb'><img src=images/" + albumname + "/2.jpg class='uitgelichtvak' /><span><img src=images/" + albumname + "/2.jpg height='415' width='750'/></a>" +
        "<a class='thumbnailr' href='#thumb'><img src=images/" + albumname + "/3.jpg class='uitgelichtvak' /><span><img src=images/" + albumname + "/3.jpg height='415' width='750'/></a>" +
        "<a class='thumbnailr' href='#thumb'><img src=images/" + albumname + "/4.jpg class='uitgelichtvakr' /><span><img src=images/" + albumname + "/4.jpg height='415' width='750'/></a>" +
        "<a class='thumbnail' href='#thumb'><img src=images/" + albumname + "/5.jpg class='uitgelichtvak' /><span><img src=images/" + albumname + "/5.jpg height='415' width='750'/></a>");
    } 
    else if {       
        $("#popupContent").html("<h1>" + eleId + "</h1>" +
        "<a class='thumbnail' href='#thumb'><img src=images/" + albumname + "/1.jpg class='uitgelichtvak' /><span><img src=images/" + albumname + "/1.jpg height='415' width='750'/></a>" + 
        "<a class='thumbnail' href='#thumb'><img src=images/" + albumname + "/2.jpg class='uitgelichtvak' /><span><img src=images/" + albumname + "/2.jpg height='415' width='750'/></a>" +
        "<a class='thumbnailr' href='#thumb'><img src=images/" + albumname + "/3.jpg class='uitgelichtvak' /><span><img src=images/" + albumname + "/3.jpg height='415' width='750'/></a>" +
        "<a class='thumbnailr' href='#thumb'><img src=images/" + albumname + "/4.jpg class='uitgelichtvakr' /><span><img src=images/" + albumname + "/4.jpg height='415' width='750'/></a>" +
        "<a class='thumbnail' href='#thumb'><img src=images/" + albumname + "/5.jpg class='uitgelichtvak' /><span><img src=images/" + albumname + "/5.jpg height='415' width='750'/></a>" +
        "<a class='thumbnail' href='#thumb'><img src=images/" + albumname + "/6.jpg class='uitgelichtvak' /><span><img src=images/" + albumname + "/6.jpg height='415' width='750'/></a>" +
        "<a class='thumbnailr' href='#thumb'><img src=images/" + albumname + "/7.jpg class='uitgelichtvak' /><span><img src=images/" + albumname + "/7.jpg height='415' width='750'/></a>" +
        "<a class='thumbnailr' href='#thumb'><img src=images/" + albumname + "/8.jpg class='uitgelichtvakr' /><span><img src=images/" + albumname + "/8.jpg height='415' width='750'/></a>" +
        "<a class='thumbnailo' href='#thumb'><img src=images/" + albumname + "/9.jpg class='uitgelichtvak' /><span><img src=images/" + albumname + "/9.jpg height='415' width='750'/></a>" +
        "<a class='thumbnailo' href='#thumb'><img src=images/" + albumname + "/10.jpg class='uitgelichtvak' /><span><img src=images/" + albumname + "/10.jpg height='415' width='750'/></a>" +
        "<a class='thumbnailro' href='#thumb'><img src=images/" + albumname + "/11.jpg class='uitgelichtvak' /><span><img src=images/" + albumname + "/11.jpg height='415' width='750'/></a>" +
        "<a class='thumbnailro' href='#thumb'><img src=images/" + albumname + "/12.jpg class='uitgelichtvakr' /><span><img src=images/" + albumname + "/12.jpg height='415' width='750'/></a>");

} 
else {
    $("#popupContent").html("<h1>Empty</h1>");
}

}

4

2 回答 2

1

这样，您就可以将元素的 id 视为文本。

 $(this).attr('id');
于 2012-10-18T18:29:29.703 回答
0

是的，this.id在 HTML 中是完全可能的。但是我注意到您的元素 ID 之间有空格？这很不寻常——我不确定这是否合法，但一般语法是正确的。

编辑：HTML 中的点击处理程序是onclick（小写 c），这也可能是问题所在。

于 2012-10-18T18:28:49.747 回答