Question

我目前正在为多张图片使用此代码：

<script>
$(function () {
$("img.cat").click(function() {
$(this).css('border', "solid 2px #ff0000");  
});
});
</script>

代码工作正常但我只希望一次有1个图像。那么有没有办法修改代码，以便它清除所有边框，甚至添加一个白色边框，所以用“cat”类添加图像是不可见的，然后将红色边框添加到最新点击的图像？

Answer 1

你可以这样做：

$(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");
});

为了提高效率，您可以选择所有元素共享的最接近的父元素。例如，如果图片都是身份div的{{1}}的孩子，那么您可以这样做：

imageContainer

Answer 2

在您点击的img上设置边框之前，请清除与您的选择器匹配的所有边框。

$("img.cat").click(function() {
    $("img.cat").css('border', '0');
    $(this).css('border', "solid 2px #ff0000");  
});

Answer 3

这应该做：

<script>
$(function () {
    $("img.cat").click(function() {
        $("img.cat").css('border', "none");  
        $(this).css('border', "solid 2px #ff0000");  
    });
});
</script>

Answer 4

<script>
$("img.cat").click(function() {


$("img.cat").each(function(){
$(this).css('border', "none"); 
});
$(this).css('border', "solid 2px #ff0000");  
});
</script>

Answer 5

如果页面上有一堆包含一个类的图像，您可以动态设置或清除指示边框的类。这意味着你根本不需要乱用CSS。只需创建两个CSS属性，一个用于没有边框的图像，一个用于所有带边框的属性，然后根据需要设置它们。这是我的例子：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <title>CSS, jQuery and Borders</title>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
  <style>
     .yes {
            border : 5px solid red;
          }
  </style>
  </head>
  <body>
  <div>Hello!</div>
  <div>Goodbye!</div>
  <div>I just want to say!</div>
  <div>I love you!</div>
  <script language="javascript" type="text/javascript">
     jQuery(document).ready(function() {
       $("div").click(function(e){
         $("div").attr("class","");
         $(this).attr("class","yes");
       });
     });
  </script>
  </body>
</html>

JQuery Onclick修改图像上的CSS

5 个答案: