我要显示的按钮一次，而不是两次

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/