找到div并改变颜色

Question

我有下表，我想选择一个选项并在它们之间切换颜色。但不能重复（只有一个选项应该是绿色...）我已经尝试了一切...... = /

$(".roundedOpt").click(function(){ 
    var opt = $(this);
    $(opt).attr("style","background:#4AA14A;");
});

http://jsfiddle.net/HVw7E/326/

Answer 1

要在每个列表中切换一个，请执行

$(".roundedOpt").on('click', function () {
    var opts = $(this).closest('td').find('.roundedOpt');

    opts.not(this).css('background', '#337AB7');
    $(this).css('background', '#4AA14A');
});

FIDDLE

Answer 2

你不需要变量，只需使用它。 :)我只是将所有蓝色项目重置为蓝色，然后将此单击项目设置为绿色。我对你的js提出了这个问题：

＆＃13;

＆＃13;

$(".roundedOpt").click(function()
                        {	
    $(".roundedOpt").removeAttr("style");
    $(this).attr("style","background:#4AA14A;");			
});
	

＆＃13;

table {
    border: 1px solid #000;
    
}
.roundedOpt {
    border-radius: 50%;
    width: 16px;
    height: 16px;
    background: #337AB7;
    color: white;
    text-align: center;
    position:relative;
    z-index:1;
	font-size: 11.5px;
	font-weight: bold;
	cursor: pointer;
}

div.dleft {
	position: absolute;
}

div.dright{
    width:auto;
	padding-left:24px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<table>
<tr id="trDetail1">

	<td style="vertical-align: middle;">
		<span>Options list #1</span>
	</td>
		<td class="text-justify" style="">
			<div style="float:right;padding-left:5px;">
			</div><p>Select an option below:</p>

			<div style="padding-top:5px;">

				<div class="cont">
					<div class="dleft">
					    <div class="roundedOpt">A</div>
					</div>
					<div class="dright">Option A.</div>
				</div>
				<div class="cont">
					<div class="dleft">
					    <div class="roundedOpt">B</div>
					</div>
					<div class="dright">Option B.</div>
				</div>
				<div class="cont">
					<div class="dleft">
					    <div class="roundedOpt">C</div>
					</div>
					<div class="dright">Option C.</div>
				</div>
				<div class="cont">
					<div class="dleft">
					    <div class="roundedOpt">D</div>
					</div>
					<div class="dright">Option D.</div>
				</div>
				<div class="cont">
					<div class="dleft">
					    <div class="roundedOpt">E</div>
					</div>
					<div class="dright">Option E.</div>
				</div>
			</div>
	</td>
</tr>
    <br/>
    <tr id="trDetail2">

	<td style="vertical-align: middle;">
		<span>Options list #2</span>
	</td>
		<td class="text-justify" style="">
			<div style="float:right;padding-left:5px;">
			</div><p>Select an option below:</p>

			<div style="padding-top:5px;">

				<div class="cont">
					<div class="dleft">
					    <div class="roundedOpt">A</div>
					</div>
					<div class="dright">Option A.</div>
				</div>
				<div class="cont">
					<div class="dleft">
					    <div class="roundedOpt">B</div>
					</div>
					<div class="dright">Option B.</div>
				</div>
				<div class="cont">
					<div class="dleft">
					    <div class="roundedOpt">C</div>
					</div>
					<div class="dright">Option C.</div>
				</div>
				<div class="cont">
					<div class="dleft">
					    <div class="roundedOpt">D</div>
					</div>
					<div class="dright">Option D.</div>
				</div>
				<div class="cont">
					<div class="dleft">
					    <div class="roundedOpt">E</div>
					</div>
					<div class="dright">Option E.</div>
				</div>
			</div>
	</td>
</tr>
</table>

＆＃13;

＆＃13;

＆＃13;

Answer 3

点击

即可摘下你的风格

$(".roundedOpt").click(function(){
    $(".roundedOpt").attr("style","");                    
    var opt = $(this);
    $(opt).attr("style","background:#4AA14A;");         
});

Look at this Fiddle