2

JavaScript for ループを使用しています。私のコードはこちらです

content = "";           
for (var i = 0; i < 13; i++) {
  var alt=glevel[i].getAttribute("name");
  if(jQuery.inArray(alt, clickArray) > -1) {
    if ($.browser.msie  && parseInt($.browser.version, 10) === 8 || $.browser.msie  && parseInt($.browser.version, 10) === 7) {
      content += "<li id='"+alt+"' style='cursor:pointer;filter:alpha(opacity=50);'>"+alt+"<br><div style='width:auto;'><img src='products/"+alt+".png'><br><font size='1px'>Click Base To Select</font></div><br><p style='text-decoration:none;color:#ffffff;font-size:10px;margin-top:-18px;' id='"+alt+"'>Click Here For Product Info</p></li> \n";
    } else {
      content += "<li id='"+alt+"' style='cursor:pointer;opacity:0.3;'>"+alt+"<br><div style='width:auto;'><img src='products/"+alt+".png'><br><font size='1px'>Click Base To Select</font></div><br><p style='text-decoration:none;color:#ffffff;font-size:10px;margin-top:-18px;' id='"+alt+"'>Click Here For Product Info</p></li> \n";
    }
    //$('#'+clickArray[alt]+"").css("opacity","0.5");
  } else{
    content += "<li id='"+alt+"' style='cursor:pointer'>"+alt+"<br><div style='width:auto;'><img src='products/"+alt+".png'><br><font size='1px'></font></div><br><p style='text-decoration:none;color:#ffffff;font-size:10px;margin-top:-18px;' id='"+alt+"'></p></li> \n";
  }
  $("#step_2").html(content);
}

このコードの出力はそのようなものです:-

image1 image2 image3 image4 
image5 image6 
image7 image8 image9 image10 
image11 image12 image13

update:- it looks like that because of my table width and height

それは非常にうまく機能し、私が持っている実際の製品画像を表示します。

今、私はこのようなものを表示したい:-

image1 image2 image3 image4     
image5 image6 image7     
image8 image9 image10     
image11 image12 image13

最初の行には 4 つの画像があり、2 番目、3 番目、4 番目の行には 3 つの画像があります。

4

4 に答える 4

2 
for (var i = 0; i < 13; i++) {
    content += "...";

    if (i == 3)                       // after the fourth line,
       content += '<br/><br/>';       // add an empty line
    if (i > 3 && (i - 4) % 3 == 2)    // then, after every three lines
       content += '<br/><br/>';       // add an empty line
}
于 2012-05-14T14:57:35.560 に答える
1

これはトリックを行うことができます：

var content = "", imgNum = 1, max = 4;

for (var i = 0; i < 4; i++) {
    if (i != 0) {
        max = 3;
    }
    for (var j = 0; j < max; j++) {
        content += "image" + imgNum;
        imgNum++;
    }
    content += "<br />";
}

document.write(content);

デモ

これはロジックです：

  • 開始画像番号を 1 に設定
  • 最大値を 4 に設定します (後で 3 に変更します)
  • 行数をループします（4回）
    • 最初のループにいる場合は最大 4 のままにし、それ以外の場合は 3 に変更します
    • 列の数をループします (最大回数)
      • コンテンツに何かを追加する
      • 画像番号を 1 増やす
    • ループの後にブレークを追加します

演算子を使用する代わりに 2 つのループを使用することを好みました%。これは、読みやすく高速であるためです。

編集:パフォーマンスを気にしない場合は、次の方法で読み取り可能なバージョンを作成する方法を見つけました%:

var content="";

for (var i = 0; i < 13; i++){
    content += "image"+(i+1);
    if(i==0||i==12){
        continue;
    }
    if(i%3==0) {
        content += "<br />";
    }
}

document.write(content);
于 2012-05-14T15:13:15.683 に答える
0

これをループの最後に置きます：

if (i == 3) { content += '<br/>'; }
if (i > 3 && (i - 4) % 3 == 2) { content += '<br/>'; }
于 2012-05-14T14:57:37.967 に答える
0

これはどうですか？

for (var i = 0; i < 13; i++){
    content += "<li>...</li>";
    if(i==3 || i==6 || i==9) { content += "<br />"; }
}
于 2012-05-14T14:59:44.237 に答える