Изменить цвет, когда переключатель

Question

Изменить цвет, когда переключатель

0

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>

Но когда я проверяю радио, текст не меняет цвет и строку.

Где моя ошибка?!

Alaanor 13 апр. 2014, в 16:18

Источник

Теги:

jquery

html

checked

radio

3 ответа

2

Вы можете сократить это до

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

FIDDLE

adeneo 13 апр. 2014, в 12:04

0

+1 аккуратное решение
martynas 13 апр. 2014, в 14:17

0

Это будет работать:

$(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

martynas 13 апр. 2014, в 12:46

Ещё вопросы

Amit Joki · Accepted Answer · 2014-04-13T11-54-00.000Z

Сделай это:

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

Вы проверяли атрибут имени, который был таким же. Вы должны проверить ценность