2012-01-13 116 views
-1

我有一個jQuery循環,它顯示按鈕A - Z,但它做的是在一行中顯示7個按鈕。所以它應該看起來像這樣:連續最後一個按鈕丟失

A B C D E F G 
    H I J K L M N 
    O P Q R S T U 
    V W X Y Z 

但問題是,此循環導致每一行中的最後一個按鈕丟失。因此按鈕G,N和U缺失。我想知道他們爲什麼錯過了,以及如何修復下面的代碼以顯示這些按鈕以及其他按鈕。

var i = 1; 

    $('#optionAndAnswer .answers').each(function() { 
     var $this = $(this); 
     var $newBtn = ''; 
     if($this.is(':visible')){ 
      $newBtn = $("<input class='answerBtnsRow answers' type='button' style='display: inline-block;' onclick='btnclick(this);' />").attr('name', $this.attr('name')).attr('value', $this.val()).attr('class', $this.attr('class')); 
     }else{ 
      $newBtn = $("<input class='answerBtnsRow answers' type='button' style='display: none;' onclick='btnclick(this);' />").attr('name', $this.attr('name')).attr('value', $this.val()).attr('class', $this.attr('class')); 
     } 

        if(i % 7 == 0){ 
       $answer.append($newBtn+"<tr></tr>"); 
      } 
      else 
      $answer.append($newBtn);     
      i = i+1; 
     }); 




PHP CODE: 


<?php 
    $a = range("A","Z"); 
?> 

    <table> 
     <tr> 

    <?php 
     $i = 1; 
     foreach($a as $key => $val){ 
      if($i%7 == 1) echo"<tr><td>"; 
      echo"<input type=\"button\" onclick=\"btnclick(this);\" value=\"$val\" id=\"answer".$val."\" name=\"answer".$val."Name\" class=\"answerBtns answers answerBtnsOff\" style=\"display: inline;\">";  
      if($i%7 == 0) echo"</td></tr>"; 
      $i++; 
     } 
    ?> 
     </tr> 
    </table> 
+0

硬盤沒有你的HTML說...也許設置'var i = 0'? – 2012-01-13 23:17:50

+0

字母H,P和X缺少如果我這樣做,如果我這樣做(i%8 === 0) – BruceyBandit 2012-01-13 23:18:27

+0

@ T.J.我想追加一個空行 – BruceyBandit 2012-01-13 23:19:25

回答

0

[忽略]

$newBtn+"<tr></tr>" 這是一個jQuery實例+字符串。 我認爲這是問題所在。 嘗試保留newBtn作爲一個字符串,直到最後的$answer.append($(newBtn));

[/忽略]

我只是試圖建立一個單一的字符串,並將其結果是麻煩的。

以下解決方案更接近你的原意,但避免了試圖追加無效的HTML片段"</tr><tr>"陷阱:

var $this, i=0, $row, $cell; 
$('#optionAndAnswer .answers').each(function() { 
    $this = $(this); 
    if(i%7 == 0) { 
     $row = $('<tr />').appendTo($answer); 
     $cell = $('<td />').appendTo($row); 
    } 
    $("<input class='answerBtnsRow answers' type='button' style='display:%s;' onclick='btnclick(this);' />".replace('%s',$this.is(':visible')?'inline-block':'none')).attr('name', $this.attr('name')).attr('value', $this.val()).attr('class', $this.attr('class')).appendTo($cell); 
    i++; 
}); 

Tested only for synatax errors

+0

您是否知道我應該將更改爲? – BruceyBandit 2012-01-13 23:45:21

+0

進一步的想法 - 字符串最終可以工作,但它更容易與順序appendTo()一起工作,隨時隨地構建錶行和它們的內容。我會加上上面的答案。 – 2012-01-14 00:28:36