Javascript 选择radio时更改同级div元素的颜色和文本值

我使用JavaScript将一组div转换为单选按钮。当按钮被选中时，我需要它，对于同一表单中的另一个div，但它是同级的，以反映按钮的单选值，以及相同div的文本颜色以反映单选值，这将是一种“颜色”

1.
2.
3.
这里的颜色

这是html。我将把剩下的代码放在JSFIDLE中。 这个想法是当我点击其中一个radio div时，“color here”div表示radio值，并使其成为该颜色，因为radio值是一种颜色。。。 这是min.js：

基本上，id为“color”并标记为“color Here”的div，我希望成为所选按钮的颜色，并将其文本更改为单选值。 以下是JSFIDLE：

---

谢谢大家

如果我理解得很清楚，您想用颜色替换“此处的颜色”，如果是，只需在函数末尾添加一行，单击：

$(' .radio').click(function(){
$(this).parent().find('.radio').removeClass('selected');
$(this).addClass('selected');
var val = $(this).attr('data-value');
//alert(val);
$(this).parent().find('input').val(val);
$('#radio-value').html(val);

---

}))

这样就可以了。我还整理了一些你已经掌握的逻辑

$('.radio').click(function() {
    $('.selected').removeClass('selected');
    $(this).addClass('selected');

    var val = $(this).attr('data-value');
    $('input').val(val);

    $('#color').text(val);
    $('#color').css({ backgroundColor: val });
});

---

使用jQuery，没有必要转到元素的父元素并在其中搜索同级元素。只需直接引用该同级。我相信您希望“Color Here”div的文本显示单击的.radio div的值。另外，选择clicked.radio buttons背景色，并将该颜色设置为“color Here”div的文本颜色。我可以通过以下方式完成此操作：

将类作为.CHNAGE添加到“Color Here”中

抓取被点击元素的css背景色——我已经在代码片段中记下了这一点。使用.css（）获取背景色。然后将其存储在名为color的变量中

找到我们命名的父级的兄弟。在using.text（）中更改并设置文本，并添加css，再次使用.css（）-再次在代码段中标记

我相信有更好的解决办法，但我还有5分钟的休息时间来帮你解决这个问题。如果你需要更多的帮助，请告诉我

$（'.radio'）。单击（函数（）{
$（this.parent（）.find（'.radio'）.removeClass（'selected'）；
$（this.addClass（'selected'）；
var val=$（this.attr（'data-value'）；
var color=$（this.css（“背景色”）；//获取单击元素的颜色
//警报（val）；
$（this.parent（）.find（'input'）.val（val）；
$（this）.parent（）同级（'.CHANGE'）.text（val）.css（“color”，color）；//查找父同级。在同一onclick函数中更改并设置元素的text和css属性
}); 
.colorsGrid{
显示：网格；
网格模板列：300px；
网格模板行：自动；
}
.收音机{
边框：2倍纯色橙色；
光标：指针；
}
.收音机，已选定{
边框颜色：蓝色；
}

1.
2.
3.
谢谢你，亚当，工作很有魅力！
$('.radio').click(function() {
    $('.selected').removeClass('selected');
    $(this).addClass('selected');

    var val = $(this).attr('data-value');
    $('input').val(val);

    $('#color').text(val);
    $('#color').css({ backgroundColor: val });
});