Question

我在更改动态创建按钮的背景颜色时遇到问题。我在页面上有很多动态创建的按钮。我希望在第一次单击按钮时将背景颜色更改为绿色，我希望第二次单击把这个改变回来。下面的代码我尝试用％2 == 0但是我意识到它第二次点击可以在其他按钮，甚至它是第二次点击我想让它绿色。我想我必须循环通过每个按钮而不是应用下面的代码，但我不能这样做（这是我的第一个问题）。第二个问题是最后我想发送绿色按钮值（文本值）到listbox.Below是我的代码，但我不是成功吧。请你帮忙

<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', '');
                }
            });
        });

Answer 1

你应该尝试这个，如果第一次点击，它会使按钮变为绿色并存储在列表中，如果第二次点击，它将从列表框中删除并删除绿色背景颜色，它将继续工作并继续关闭模式。

$(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');
        }
    });
});

或者您也可以尝试 .toggle

$(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()
   });
});

Answer 2

$(':button').toggleClass(["red", "green"])

在您的css文件中

，确保红色和绿色具有值

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

2 个答案: