javascript - 从 radio :checked to div corresponding with session id 设置类

Question

我正在学习 jquery，我很难构建这个脚本。我需要设置 radio 类:在一些 div 中检查了选项的类对应部分。为了更好地理解，请看一下这段代码。

谁能帮帮我，我已经很感激了!

HTML:

<form action="">
    <div class="object" id="obj01">
        <h3>Colors-01</h3>
        <label  class="cor01 cor">01<input type="radio" name="color01"  class="rd"></label>
        <label  class="cor02 cor">02<input type="radio" name="color01"  class="rd"></label>
        <label  class="cor03 cor">03<input type="radio" name="color01"  class="rd"></label>
        <label  class="cor04 cor">04<input type="radio" name="color01"  class="rd"></label>
        <label  class="cor05 cor">05<input type="radio" name="color01"  class="rd"></label>
    </div>
    <div class="object" id="obj02">
        <h3>Colors-02</h3>
        <label  class="cor01 cor">01<input type="radio" name="color02"  class="rd"></label>
        <label  class="cor02 cor">02<input type="radio" name="color02"  class="rd"></label>
        <label  class="cor03 cor">03<input type="radio" name="color02"  class="rd"></label>
        <label  class="cor04 cor">04<input type="radio" name="color02"  class="rd"></label>
        <label  class="cor05 cor">05<input type="radio" name="color02"  class="rd"></label>
    </div>
    <div class="object" id="obj03">
        <h3>Colors-03</h3>
        <label  class="cor01 cor">01<input type="radio" name="color03"  class="rd"></label>
        <label  class="cor02 cor">02<input type="radio" name="color03"  class="rd"></label>
        <label class="cor03 cor">03<input type="radio" name="color03"  class="rd"></label>
        <label  class="cor04 cor">04<input type="radio" name="color03"  class="rd"></label>
        <label  class="cor05 cor">05<input type="radio" name="color03"  class="rd"></label>
    </div>
</form>
<div class="obj obj01">Color me</div>
<div class="obj obj02">Hey! More color</div>
<div class="obj obj03">Colorize!</div>

Js/jquery:

$('.cor').click(function() {
        var cor = $(this).find('.rd:checked').parents().css('background-color');
        var id = $(this).closest('.object').attr('id');
        /** Need a script for set the first class from <label> with radio checked **/
        $('.' + id).css('background-color', cor);
    });

CSS:

.cor01{
    background-color: yellow;
}
.cor02{
    background-color: lightblue;
}
.cor03{
    background-color: lightgreen;
}
.cor04{
    background-color: coral;
}
.cor05{
    background-color: pink;
}
.obj{
    padding: 2em;
    border: 1px dashed #333;
    text-align: center;
}

Answer 1

我更新了我的 fiddle ，将选定的类设置为获取背景的相同元素，检查这是否满足您的需求:

https://jsfiddle.net/oo1s4jm0/3/

相关代码:

    var classs = $(this).attr('class');
    var first = classs.split(' ')[0];
    var newClass = $('.' + id).attr('class');
    var splited = newClass.split(' ');
    if(splited.length > 2){
        splited[2] = first;
        $('.' + id).attr('class', splited.join(' '));
    }else{
        $('.' + id).addClass(first);
    }