javascript - 自制单选按钮的javascript不起作用

Question

我有这个 JS 用于我自己的单选按钮；但它似乎不起作用；控制台在第 14 行记录以下内容：Uncaught SyntaxError: Unexpected token }。

这是我使用的代码：

$(document).ready(function(){
    $('.choise').click(function(){

        $(this).css({"background":"#58D998"});

        });
    if ( $('.choise').css({"background":"#58D998"}) ) 
            {

            $('.choise').click(function()
                {
                $(this).css({"background":"rgba(0, 0, 0, 0.7)"});
                }
            }
        );

);

我希望此代码按如下方式工作：第一次单击按钮时，将背景颜色设为 X。第二次点击时，将其更改为颜色 Y。

Answer 1

}您的第二个click处理程序中有一个太多了。

话虽如此，您的代码很丑陋而且非常错误。它不会切换。

你为什么不这样做呢？

<label class="choice"><input type="radio" /><span>Click here!</span></label>
<label class="choice"><input type="radio" /><span>Or here!</span></label>

这个CSS：

label.choice>input[type=radio] {display:none}
label.choice>input[type=radio]:checked~span {background:#58D998}

Answer 2

演示

$(document).ready(function () {
    $('.choise').click(function () {
        $(this).css({
            "background": "#58D998"
        });

        if ($('.choise').css({
            "background": "#58D998"
        })) {
            $('.choise').click(function () {
                $(this).css({
                    "background": "rgba(0, 0, 0, 0.7)"
                });
            });
        }
    });
});

Answer 3

简单的答案：

更详细：

你的大括号是在错误的地方。您的代码应为：

$(document).ready(function(){
    $('.choise').click(function(){

        $(this).css({"background":"#58D998"});

        });
    if ( $('.choise').css({"background":"#58D998"}) ) 
        {

            $('.choise').click(function()
                {
                $(this).css({"background":"rgba(0, 0, 0, 0.7)"});
                }
            );
        }


);

正如其他人指出的那样，这可能不是处理事情的最佳方式。