0

ifor ループでインクリメントされる変数を使用して、mako テンプレートの div に一意の ID を作成したいと考えています。

var i=0;
    % for p in row.photos: 
    %if not p.PRIVATE:              
    /* setup div's for photo containers*/

    $('#photos').append("<div id='+i+' class='thumbnailimage'></div>"); 
    $('#+i+').append("<div id='+i+container' class='thumb_container'></div>");  
    $('#+i+container').append("<div id='+i+thumb' class='large_thumb'></div>");
    $('#+i+thumb').append("<div class='large_thumb_border'></div>");
    $('#+i+thumb').append("<div class='large_thumb_shine'></div>");

    /*insert the image*/
    $(document.createElement("img")).attr({ "src": "${tg.url('photo/%s/%s' % (p.PHOTOINDEX))}" }).appendTo('#+i+'thumb'');

    i++;


    %endif
% endfor

javascript が実行されたときに html で期待される結果:

<div id='photos'>
    <div id='1'class='thumbnailimage'>
        <div id='1container' class='thumb_container'>

など代わりに私は得る：

<div id='photos'>
    <div id='+1+' class...>
    </div>
</div><!--end photos-->

助言がありますか？

以下の提案に従って、コードを次のように変更しました

$('#photos').append("<div id="'photo'+i+" class='thumbnailimage'></div>"); 
$("#'photo'+i+").append("<div id="'container'+i+" class='thumb_container'></div>");  
$("#'container'+i+").append("<div id="'thumb'+i+" class='large_thumb'></div>");
$("#'thumb'+i+").append("<div class='large_thumb_border'></div>");
$("#'thumb'+i+").append("<div class='large_thumb_shine'></div>");

SyntaxError: missing ) after argument list [Break On This Error] というエラー メッセージが表示されるようになりました。 

$('#photos').append("<div id="photo+i+" class='thumbnailimage'></div>");

写真のpに矢印あり

最後に！！jquery href の + 記号に問題があり続けたため、jQuery コマンドの外部で変数全体を定義する必要がありました。次のコードを使用して、目的の結果を取得しました。

    var i=0;

    % for p in row.photos:
     var photo='photo'+i;
     var photoId="#"+photo;
     var container='container'+i;
     var containerId="#"+container;
     var thumb='thumb'+i;
     var thumbId="#"+thumb;
       $('#photos').append("<div id="+photo+" class='thumbnailimage'></div>"); 
       $(photoId).append("<div id="+container+" class='thumb_container'></div>");  
       $(containerId).append("<div id="+thumb+" class='large_thumb'></div>");
       $(thumbId).append("<div class='large_thumb_border'></div>");   
       $(thumbId).append("<div class='large_thumb_shine'></div>");
       $(document.createElement("img")).attr({ "src": "${tg.url('photo/%s/%s' % (row.GISNUM, p.PHOTOINDEX))}" }).prependTo(thumbId);
% endfor
4

1 に答える 1

6

これを変える：

$('#photos').append("<div id='+i+' class='thumbnailimage'></div>");

に：

$('#photos').append("<div id='"+i+"' class='thumbnailimage'></div>");

ページの Doctype が HTML5 でない場合、ID は文字で始まる必要があることに注意してください。

$('#photos').append("<div id='"+i+"' class='thumbnailimage'></div>"); 
$('#'+i).append("<div id='"+i+"container' class='thumb_container'></div>");  
$('#'+i+'container').append("<div id='"+i+"thumb' class='large_thumb'></div>");
$('#'+i+'thumb').append("<div class='large_thumb_border'></div>");
$('#'+i+'thumb').append("<div class='large_thumb_shine'></div>");
于 2012-08-10T16:01:26.413 に答える