jquery 图像选择器在 IE7 中不起作用
所以我有一些像这样的 html:
<div id="avatar_choices">
<label for="id_choice_0">
<input id="id_choice_0" type="radio" name="choice" value="7" />
<img src="someimage.jpg" />
</label>
<label for="id_choice_1">
<input id="id_choice_1" type="radio" name="choice" value="8" />
<img src="someimage2.jpg" />
</label>
</div>
和一些脚本:
$('#avatar_choices input').hide();
$('#avatar_choices img').click(function(){
$('#avatar_choices img').css('border', '2px solid #efefef');
$(this).css('border', '2px solid #39c');
$(this).siblings('input').attr('checked', 'checked');
});
目标是允许用户单击图像选项,使所选图像以边框颜色突出显示。
这在 FF 中工作得很好。 由于某种原因,在 IE 中,一旦我单击一个图像,单击另一个图像,然后尝试单击第一个图像,边框不会改变(尽管它确实被选中)。
编辑: 我的解决方案最终一半是偶然发生的。 由于 redsquare 的回答,我将代码更改为:
$('#avatar_choices input').hide();
$('#avatar_choices img').click(function(){
$('#avatar_choices img').removeClass('selected');
$(this).addClass('selected');
$(this).siblings('input').attr('checked', 'checked');
});
where:
#avatar_choices img.selected{border:2px solid #39c;}
Gofigure。
So I have some html like so:
<div id="avatar_choices">
<label for="id_choice_0">
<input id="id_choice_0" type="radio" name="choice" value="7" />
<img src="someimage.jpg" />
</label>
<label for="id_choice_1">
<input id="id_choice_1" type="radio" name="choice" value="8" />
<img src="someimage2.jpg" />
</label>
</div>
And some script:
$('#avatar_choices input').hide();
$('#avatar_choices img').click(function(){
$('#avatar_choices img').css('border', '2px solid #efefef');
$(this).css('border', '2px solid #39c');
$(this).siblings('input').attr('checked', 'checked');
});
The goal is to allow the user to click around on the image options, having the selected one highlight with a border colour.
This works fine in FF. For some reason in IE once I click on an image, click another image, then try to click the first one, the border won't change (though it does get selected).
EDIT:
My solution ended up happening half by accident. I changed the code to this due to redsquare's answer:
$('#avatar_choices input').hide();
$('#avatar_choices img').click(function(){
$('#avatar_choices img').removeClass('selected');
$(this).addClass('selected');
$(this).siblings('input').attr('checked', 'checked');
});
where:
#avatar_choices img.selected{border:2px solid #39c;}
Go figure.
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
在这种情况下最好使用addClass和removeClass。 更容易维护。
你能粘贴你的完整 html 以便我可以看到你的文档类型等
best using addClass and removeClass in this scenario. Easier to maintain.
Can you paste your full html so I can see your doctype etc