我要顯示的按鈕一次，而不是兩次

Question

我有2個按鈕，它們都顯示像下面兩次：

Button 1 (Performs the onclick='SelectAll(this)') 
Button 1 (Performs the onclick='RemoveAll(this)') 

Button 2 (Performs the onclick='SelectAll(this)') 
Button 2 (Performs the onclick='RemoveAll(this)') 

兩個按鈕1和按鈕2應該出現一次象下面這樣：

Button 1 (Performs the onclick='SelectAll(this)') 
Button 2 (Performs the onclick='RemoveAll(this)') 

我怎樣才能實現這一點以上：

，其顯示該代碼這些按鈕下面：

function insertButton(form) { 


var $answer = $("<table class='answer'></table>"); 

$('.buttonOne:first, .buttonTwo:first').each(function() { 
     var $this = $(this); 
     var $BtnsClass = ''; 

     $row = $("<tr/>").appendTo($answer); 
     $cell = $("<td/>").appendTo($row); 


     $BtnsClass = $("<input class='buttonOne btnsAll' type='button' style='display: block;' value='Button 1' onClick='selectAll(this);' /> 
     <br/> 
     <input class='buttonTwo btnsRemove' type='button' style='display: block;' value='Button 2' onClick='removeAll(this);' />") 
     .attr('name', $this.attr('name')).attr('value', $this.val()).attr('class', $this.attr('class')); 

     $BtnsClass.appendTo($cell); 

    }); 

     $tr.append($answer); 

     } 

下面是HTML凡在jQuery的按鈕應該匹配

<p><input class="buttonOne btnsAll" name="allBtnsName" type="button" value="Button 1" onClick="selectAll(this);" /> 
<br/><input class="buttonTwo btnsRemove" name="allRemoveBtnsName" type="button" value="Button 2" onClick="removeAll(this);" /></p> 

的HTML按鈕只顯示每個按鈕一次，這是很好的，所以爲什麼jQuery的顯示兩次，而不是一次按鈕？

Answer 1

我認爲你正在尋找像下面的一些功能，

function insertButton(form) { 

    var $answer = $("<table class='answer'></table>"); 

    var $btnOne = $('.buttonOne:first'); 
    var $btnTwo = $('.buttonTwo:first'); 

    var $BtnsClass = ''; 

    $row = $("<tr/>").appendTo($answer); 
    $cell = $("<td/>").appendTo($row); 

    $BtnsClass = $("<input class='buttonOne btnsAll' type='button' style='display: block;' value='Button 1' onClick='selectAll(this);' /> 
     <br/> 
     <input class='buttonTwo btnsRemove' type='button' style='display: block;' value='Button 2' onClick='removeAll(this);' />"); 

    $BtnsClass.attr('name', $btnOne.attr('name')).attr('value', $btnOne.val()).attr('class', $btnOne.attr('class')).appendTo($cell); 

    $BtnsClass.attr('name', $btnTwo.attr('name')).attr('value', $btnTwo.val()).attr('class', $btnTwo.attr('class')).appendTo($cell); 

    $tr.append($answer); 
} 

Answer 2

那麼，你已經在你的代碼了有一個轉換功能。它採取的.buttonOne一審和.buttonTwo一審和插入2個input type="button"標籤爲每一個。基於您的代碼示例，你可能看到的是這樣的輸出：

Button 1 
Button 2 

Button 1 
Button 2 

如果是這樣的話，那麼你有一些選項來得到它下降到只有一個每個按鈕的實例。最簡單的將是從您激活each呼叫選擇刪除.buttonTwo:first。這將使它只轉換.buttonOne一審到兩個input標籤。

另一種選擇是向each方法分成兩個單獨的呼叫 - 一個用於.buttonOne:first，一個用於.buttonTwo:first - 使得操作僅會爲每個匹配元件的單個input標籤。您還需要修改代碼，以便只插入一個input標籤，而不是現在正在執行的兩個標籤。

第三個選擇是使在each功能夠聰明，看$this對象的代碼，並得到正確的按鈕CSS類（buttonOne或buttonTwo），然後創建基於類的正確input標籤。這可能需要一些工作來重寫代碼，以使其具備這種智能，但最終會採用更簡化的方法。

你可以嘗試像以下（注：UNTESTED）：

function insertButton(form) { 
    var $answer = $("<table class='answer'></table>"); 

    $('.buttonOne:first, .buttonTwo:first').each(function() { 
     var $this = $(this); 
     var $BtnsClass, clickEvent = ''; 

     $row = $("<tr/>").appendTo($answer); 
     $cell = $("<td/>").appendTo($row); 

     if ($this.hasClass('buttonOne')) { 
      clickEvent = 'selectAll(this);'; 
     } 
     else if ($this.hasClass('buttonTwo')) { 
      clickEvent = 'removeAll(this);'; 
     } 

     $BtnsClass = $("<input type='button' style='display: block;' onClick='" + clickEvent + "' />") 
       .attr('name', $this.attr('name')).attr('value', $this.val()).attr('class', $this.attr('class')); 
     $BtnsClass.appendTo($cell); 
     }); 

    $tr.append($answer); 
    } 

Answer 3

的各功能觸發兩次，因爲它觸發每一次選擇......連選擇不看的權利。

function insertButton(form) 
{ 
    var btn1 = $(document.createElement('button')); 
     btn1.attr("name" somename); 

    var btn2 = $(document.createElement('button')); 
     btn2.attr("name" somename); 

    $(form).append(btn1).append(btn2); 
} 

你的代碼是超級混亂，但我認爲這是你想要的？或者類似的東西？

Answer 4

你可以使用jQuery.template Plugin

例子： http://jsfiddle.net/8rGe4/1/