Question

我正在学习jquery，我很难构建这个脚本。我需要设置无线电类：在一些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

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

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

从收音机设置类：选中与会话ID对应的div

1 个答案: