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.idHTML では完全に可能です。ただし、要素 ID の間にスペースがあることに気付きましたか? それは珍しいことです。それが合法かどうかはわかりませんが、一般的な構文は正しいです。

編集: HTML のクリック ハンドラーはonclick(小文字の c) です。これも問題になる可能性があります。

于 2012-10-18T18:28:49.747 に答える