在选择单选按钮时更改同级 div 元素的颜色和文本值

Question

我有一组divs变成了JavaScript的单选按钮。当选择按钮时，我需要拥有它，对于另一个div，在相同的形式中，但一个兄弟姐妹，以反映按钮的无线电值，以及具有相同div的文本颜色以反映无线电值，这将是一个"颜色"。

<form method='post' action='send.php'>
<div class='colorsGrid' id='colors' >
<div style='background-color:red;' class='radio' data-value='Red'>1</div>
<div style='background-color:green;' class='radio' data-value='Green'>2</div>
<div style='background-color:black;' class='radio' data-value='Black'>3</div>
<input type='text' id='radio-value' name='radio-value' />
</div>
<div  class='' id='color radio-value' name='radio-value' />Color Here</div>
</form>

这是 html。我将在JSfiddle中拥有其余代码。 这个想法是当我单击其中一个无线电div 时，让"这里的颜色"div 说出无线电值并让它变成那个颜色，因为无线电值是一种颜色...... 这是最小.js： https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js

基本上，id为"color"的div，并标记为"此处的颜色"，我想成为所选按钮的颜色，并将其文本更改为无线电值。 这是JsFiddle： https://jsfiddle.net/Lrp16v2x/31/

谢谢大家

Answer 1

这将做到这一点。我还清理了一些你已经拥有的逻辑。

$('.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，没有必要转到元素的父元素并搜索同级元素。只需直接引用该兄弟姐妹即可。

Answer 2

如果我理解得很好，您想用颜色替换"这里的颜色"，如果是这样，只需在函数末尾添加一行，请单击：

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

}(;

Answer 3

我相信您希望"此处颜色"div的文本显示单击的.radiodiv的值。此外，采用单击的 .radio 按钮背景颜色，并将该颜色设置为"此处颜色"div 的文本颜色。我能够通过以下方式做到这一点：

1. 将类添加到"此处的颜色"中，作为 。中国
2. 抓取点击元素的 CSS 背景颜色 - 我已经在代码片段中注明了这一点。使用 .css(( 获取背景颜色。然后将其存储在名为 Color 的变量中。
3. 找到我们命名的父级的兄弟姐妹。更改并使用 .text(( 设置文本并添加 css，再次使用 .css((- 再次在代码片段中注明。

我敢肯定，有更好的解决方案，但我的休息时间还剩下 5 分钟来帮助您解决这个问题。 如果您需要更多帮助，请告诉我。

$(' .radio').click(function(){
$(this).parent().find('.radio').removeClass('selected');
$(this).addClass('selected');
var val = $(this).attr('data-value');
var color = $(this).css("background-color");//Get the color of the clicked element
//alert(val);
$(this).parent().find('input').val(val);

$(this).parent().siblings('.CHANGE').text(val).css("color", color);//find the parent sibling .CHANGE and set the text and CSS property of the element within the same onclick function
});

		.colorsGrid {
	display: grid;
	grid-template-columns: 300px;
	grid-template-rows: auto;
	 }
.radio {

border: 2px solid orange;
cursor:pointer;	
	
	}
.radio.selected{
border-color: blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<form method='post' action='send.php'>
<div class="colorsGrid" id='colors' >
<div style='background-color:red;' class='radio' data-value="Red">1</div>
<div style='background-color:green;' class='radio' data-value="Green">2</div>
<div style='background-color:black;' class='radio' data-value="Black">3</div>
	<input type='text' id='radio-value' name='radio-value' />
</div>
<div  class='CHANGE' id='color radio-value' name='radio-value'></div>
</form>