Question

JQuery的：

$(function() 
{
    $(':radio[name="noir"]').click(function()
    {
        $('#h1color')
            .addClass('noir')
            .removeClass('vert')
            .removeClass('rouge')
            .html('Je suis noir !');
    });
    $(':radio[name="vert"]').click(function()
    {
        $('#h1color')
            .addClass('vert')
            .removeClass('noir')
            .removeClass('rouge')
            .html('Je suis vert !');
    });

    $(':radio[name="rouge"]').click(function()
    {
        $('#h1color')
            .addClass('rouge')
            .removeClass('vert')
            .removeClass('noir')
            .html('Je suis rouge !');
    }); 
});

HTML：

<form action="post">
    <input type="radio" name="color" value="noir"/>Noir <br/>
    <input type="radio" name="color" value="vert"/>Vert<br/>
    <input type="radio" name="color" value="rouge"/>Rouge<br/>
</form>
<h1 id="h1color">Je suis Noir !</h1>

但是当我检查收音机时，文字不会改变颜色和字符串。

我的错误在哪里？！

Answer 1

您可以将其缩短为

$('input[type="radio"][name="color"]').on('change', function() {
    $('#h1color').removeClass().addClass(this.value).html('Je suis '+this.value);
});

FIDDLE

Answer 2

这样做：

$(function() {

    $(':radio[value="noir"]').click(function(){
        $('#h1color').addClass('noir').removeClass('vert').removeClass('rouge').html('Je suis noir !');
    });
    $(':radio[value="vert"]').click(function(){
        $('#h1color').addClass('vert').removeClass('noir').removeClass('rouge').html('Je suis vert !');
    });
    $(':radio[value="rouge"]').click(function(){
        $('#h1color').addClass('rouge').removeClass('vert').removeClass('noir').html('Je suis rouge !');
    }); 
});

您正在检查名称属性是否相同。你必须检查价值

Answer 3

这将有效：

$(function() {
    $("form").on("click", "input", function(e) {
        var $header = $("#h1color");
        if (e.target.type == "radio") {
            var $colour = $(this).val();
            $header.removeClass().addClass($colour).text("Je suis " + $colour);
        }
    });
});

DEMO

单选按钮更改时更改颜色

3 个答案: