如何更改单击单选按钮上的图像? 我有笑脸,点击更改img。(static img- happy.png,active img- happy_1.png)
小提琴:http://jsfiddle.net/ejff1j9x/4/
HTML :
<div id="sites">
<input type="radio" name="site" id="so" value="stackoverflow" /><label for="so"><img src="http://impalz.co/ratingicons/Sad.png" alt="Stack Overflow" /></label>
<input type="radio" name="site" id="sf" value="serverfault" /><label for="sf"><img src="http://impalz.co/ratingicons/okay.png" alt="Server Fault" /></label>
<input type="radio" name="site" id="su" value="superuser" /><label for="su"><img class="imgs" src="http://impalz.co/ratingicons/happy.png" alt="Super User" /></label>
</div>
JS :
$('#sites input:radio').addClass('input_hidden');
$('#sites label').click(function() {
$(this).addClass('selected').siblings().removeClass('selected');
});
CSS :
.input_hidden {
position: absolute;
left: -9999px;
}
.selected {
content: url(http://impalz.co/ratingicons/happy_1.png);
}
我可以使用所有其他图像更改一个静态图像。
答案 0 :(得分:1)
我没有正确地提出您的问题这是您正在尝试检查以下代码:
$('#sites label').click(function() {
$(this).find("img").attr("src","imagepath");
$(this).addClass('selected').siblings().removeClass('selected');
});
答案 1 :(得分:0)
嗨,现在你可以尝试这个只有css,不需要jquery。
就像这样
#sites > label > input{display:none;}
#sites > label {cursor:pointer;}
#sites > label > input + img+img{display:none;}
#sites > label > input:checked +img{display:none;}
#sites > label > input:checked + img+img{display:inline-block;}
&#13;
<div id="sites">
<label>
<input type="radio" name="site" id="so" value="stackoverflow" />
<img src="http://impalz.co/ratingicons/Sad.png" alt="Stack Overflow" />
<img src="http://impalz.co/ratingicons/Sad_1.png" alt="Stack Overflow" />
</label>
<label>
<input type="radio" name="site" value="serverfault" />
<img src="http://impalz.co/ratingicons/okay.png" alt="Server Fault" />
<img src="http://impalz.co/ratingicons/okay_1.png" alt="Server Fault" />
</label>
<label>
<input type="radio" name="site" value="superuser" />
<img class="imgs" src="http://impalz.co/ratingicons/happy.png" alt="Super User" />
<img class="imgs" src="http://impalz.co/ratingicons/happy_1.png" alt="Super User" />
</label>
</div>
&#13;