jquery在单击时更改动态按钮的颜色并将其发送到列表框

我在更改动态创建的按钮的背景色时遇到问题。我在页面上动态创建了许多按钮。我想在第一次单击按钮时将背景色更改为绿色，在第二次单击时，我想收回此更改。在下面的代码中，我尝试使用%2==0执行此操作，但在第二次单击时，我意识到了这一点可能是在其他按钮上，甚至是第二次单击，我想让它变成绿色。我想我必须循环通过每个按钮，而不是应用下面的代码，但我不能这样做（这是我的第一个问题）。第二个问题是最后我想只发送绿色按钮值（文本值）到一个列表框。下面是我的代码，但我没有成功。你能帮我吗

<asp:ListBox ID="ListBox2" runat="server" Width="111px"></asp:ListBox>


        $(function () {
            var count = 0;
            $('input[type=button]').on('click', function (e) {
                e.preventDefault();
                count += 1;
                if (count % 2 === 0) {
                    $(this).css('background-color', '#6FA478');
                    var value = $(this).value;
                    $("[id$=ListBox2]").append($('<option/>').text(value).attr('value', value));
                }
                else {
                    $(this).css('background-color', '');
                }
            });
        });     

$（函数（）{
var计数=0；
$（'input[type=button]'）。在（'click'，函数（e）{
e、 预防默认值（）；
计数+=1；
如果（计数%2==0）{
$（this.css（'background-color'，'#6FA478'）；
var值=$（this）.value；
$（“[id$=ListBox2]”。追加（$（“”）.text（value.attr（'value'，value））；
}
否则{
$（this.css（'background-color'，''）；
}
});
});     

---

在css文件中，确保红色和绿色具有值。您应该尝试此操作，如果第一次单击，它将使按钮变为绿色并存储在列表中；如果第二次单击，它将从列表框中删除，并删除绿色背景色，并且它将在打开和关闭模式下继续工作

$(function () {
    $('input[type=button]').on('click', function (e) {
        e.preventDefault();
        var toggle = $(this).data('toggle');
        var value = $(this).val();
        if(toggle && toggle == "1") {
            $(this).css('background-color', '');
            $('[id$=ListBox2] option[value="'+value+'"]').remove()
            $(this).data('toggle', '0');
        }else{
            $(this).css('background-color', '#6FA478');      
            $("[id$=ListBox2]").append('<option value="'+value+'">'+value+'</option>');
            $(this).data('toggle', '1');
        }
    });
});

$（函数（）{
$（'input[type=button]'）。在（'click'，函数（e）{
e、 预防默认值（）；
var toggle=$（this.data（'toggle'）；
var值=$（this.val（）；
如果（切换和切换==“1”）{
$（this.css（'background-color'，''）；
$（'[id$=ListBox2]选项[value=“'+value+'“]”）。删除（）
$（this.data（'toggle'，'0'）；
}否则{
$（this.css（'background-color'，'#6FA478'）；
$（“[id$=ListBox2]”。追加（“”+value+“”）；
$（this）.data（'toggle'，'1'）；
}
});
});

或者你也可以试试，就像

$(function () {
    $('input[type=button]').toggle(function (e) {
       e.preventDefault();
       var value = $(this).val();
       $(this).css('background-color', '#6FA478');      
       $("[id$=ListBox2]").append('<option value="'+value+'">'+value+'</option>');
    }, function(e){
       e.preventDefault();
       var value = $(this).val();
       $(this).css('background-color', '');
       $('[id$=ListBox2] option[value="'+value+'"]').remove()
   });
});

$（函数（）{
$（'input[type=button]'）。切换（函数（e）{
e、 预防默认值（）；
var值=$（this.val（）；
$（this.css（'background-color'，'#6FA478'）；
$（“[id$=ListBox2]”。追加（“”+value+“”）；
}，功能（e）{
e、 预防默认值（）；
var值=$（this.val（）；
$（this.css（'background-color'，''）；
$（'[id$=ListBox2]选项[value=“'+value+'“]”）。删除（）
});
});

on（）

不是魔法，你仍然必须将绑定了

on（）

的事件分配给DOM中DOM就绪点的元素（通常是按钮的父元素/包含元素）。@DavidThomas，soooooooo？别给我上历史课，写代码吧，现在有了一个激励来帮助我了。不管怎样，实际的（relevent/）HTML是什么？（“查看源代码”在您的浏览器中，服务器端脚本与JavaScript完全无关）。@DavidThomas，您的评论完全没有用处，问题很简单：获取绿色按钮（当您两次单击同一按钮时，许多按钮会从绿色变为默认值）并将其发送到列表框。就是这样，我和你的关系不大comments@Asil，你的问题不清楚。除了格式问题（文本墙很难阅读），您永远不会解释

将绿色按钮值发送到列表框的含义。你的总体态度也没有帮助。如果问题很简单，请尝试以更容易理解的方式解释。@YoprajGupta，嗨，Yopraj，我检查了它的颜色是否正常，但当你第二次单击同一按钮时，它不会从列表框中删除。我的意思是当按钮颜色为默认值时。你能帮帮忙吗。@YoprajGupta，恐怕我又查了一遍，但得到的结果是一样的。我无法从列表框中删除其默认颜色的按钮。@AsilEris，检查更新的答案，这将解决您的问题，删除中有一些错误，现在已更正。@YoprajGupta，非常感谢，这是我所做的want@YoprajGupta,最后一个问题，如果我想将此代码用于button类，因为对于某些按钮，我想将其值放入另一个列表框（listbox3）。我想我必须将代码从$（'input[type=button]'）更改为$（'.btnclass'），或者？？
$(function () {
    $('input[type=button]').toggle(function (e) {
       e.preventDefault();
       var value = $(this).val();
       $(this).css('background-color', '#6FA478');      
       $("[id$=ListBox2]").append('<option value="'+value+'">'+value+'</option>');
    }, function(e){
       e.preventDefault();
       var value = $(this).val();
       $(this).css('background-color', '');
       $('[id$=ListBox2] option[value="'+value+'"]').remove()
   });
});