Question

是否可以在比较中使用以下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>

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

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>");
}

}

Answer 1

是的，this.id完全可以在HTML中使用。但是我注意到你的元素ID之间有空格？这是不寻常的 - 我不确定这是合法的，但一般语法是正确的。

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

Answer 2

通过这个，您可以将元素的id作为文本考虑在内。

 $(this).attr('id');

将HTML元素ID转换为字符串以进行比较

2 个答案: