JQuery Onclick修改图像上的CSS
JQuery Onclick修改图像上的CSS
提问于 2011-12-31 03:48:24
我目前正在对几个图像使用此代码：
<script>
$(function () {
$("img.cat").click(function() {
$(this).css('border', "solid 2px #ff0000");
});
});
</script>代码运行良好，但我只想要一个图像边界在同一时间。那么，有没有办法修改代码，使其清除所有边框，甚至添加一个白色边框，这样就看不到使用"cat“类添加的图像，然后将红色边框添加到最近单击的图像？
回答 5
Stack Overflow用户
回答已采纳
发布于 2011-12-31 03:52:19
您可以这样做：
$(function () {
$("img.cat").click(function() {
$("img.cat").css("border","none"); // erases the border on other images
$(this).css('border', "solid 2px #ff0000");
});
});您只需再次选择具有相同类的所有图像并删除其边框，然后继续设置刚刚单击的图像的边框。
此外，只要您使用的是jQuery 1.7 (您可以在早期版本中使用delegate() )，那么建议您使用on()来附加事件处理程序。这看起来像这样：
$(document).on("click", "img.cat", function(){
$("img.cat").css("border","none");
});为了提高效率，您可以选择所有元素共享的最接近的父元素。例如，如果图像都是id为imageContainer的div的子项，您可以这样做：
$("#imageContainer").on("click", "img.cat", function(){
$("img.cat").css("border","none");
});Stack Overflow用户
发布于 2011-12-31 03:52:20
在单击的img上设置边框之前，请清除与您的选择器匹配的所有边框。
$("img.cat").click(function() {
$("img.cat").css('border', '0');
$(this).css('border', "solid 2px #ff0000");
});Stack Overflow用户
发布于 2011-12-31 03:51:53
这应该可以做到：
<script>
$(function () {
$("img.cat").click(function() {
$("img.cat").css('border', "none");
$(this).css('border', "solid 2px #ff0000");
});
});
</script>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/8683404
复制相关文章
相似问题
腾讯云开发者
