Question

我有两个按钮，它们都显示两次，如下所示：

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);

        }

下面是jquery中按钮与

匹配的html

<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的第一个实例，并为每个插入两个input type="button"标记。根据您的代码示例，您可能会看到这是输出：

Button 1 Button 2 Button 1 Button 2

如果是这种情况，那么您可以选择将其缩小到每个按钮的一个实例。最简单的方法是从激活.buttonTwo:first调用的选择器中删除each。这将使其仅将.buttonOne的第一个实例转换为两个input标记。

另一种选择是将each方法拆分为两个单独的调用 - 一个用于.buttonOne:first，另一个用于.buttonTwo:first - 这样该操作只会创建一个input每个匹配元素的标记。您还需要修改代码，只插入一个input标记，而不是它现在正在执行的两个标记。

第三个选项是使each函数中的代码足够智能，以查看$this对象并获取正确的按钮CSS类（buttonOne或{{1}然后根据该类创建正确的buttonTwo标记。这可能需要一些工作来重写你必须给它的智能代码，但你最终会采用更简化的方法。

您可以尝试以下内容（注意： UNTESTED ）：

input

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/

我希望按钮显示一次，而不是两次

4 个答案: