JQuery的點擊數修改CSS上的圖像

我目前使用此代碼爲幾個圖片：JQuery的點擊數修改CSS上的圖像

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

代碼工作正常，但我只想要1倍的圖像在一個時間界。那麼是否有任何方法可以修改代碼，使其清除所有邊框甚至添加一個白色邊框，以便用類「cat」添加圖像，然後將紅色邊框添加到最新點擊的圖像中時不可見？

來源

2011-12-30 Satch3000

上面的代碼表示，所有IMG誰擁有貓類邊境specifiec IMG點擊whichh - 所以，你要當我的img點擊以前所有的IMG誰點擊了想要的有沒有-邊境？ – 2011-12-30 19:49:37

我有幾個類=「貓」的圖像...沒有唯一的ID。 – Satch3000 2011-12-30 19:51:51

你可以這樣做：

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

來源

2011-12-30 19:52:18 Purag

這應該這樣做：

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

來源

2011-12-30 19:51:52

之前設置的被點擊的IMG的邊界，明確所有邊框您選擇匹配。

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

來源

2011-12-30 19:52:20

2秒。差別是兩秒鐘。 – Purag 2011-12-30 19:56:28

@Purmou - 好吧，我今天打了200，所以+1給你:) – 2011-12-30 20:05:52

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


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

來源

2011-12-30 19:54:24

如果您在頁面上一些圖片，有一類，你可以做什麼是動態設置或清除指示邊框的類。這意味着你實際上並不需要混淆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>

來源

2011-12-30 20:13:56 Verifex

JQuery的點擊數修改CSS上的圖像

回答

相關問題