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

Question

我正在学习 jquery，我很难构建这个脚本。 我需要设置 radio 类:用选项的类相应部分 checkin 一些 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);
    }