I am currently using this code for several images:
<script>
$(function () {
$("img.cat").click(function() {
$(this).css('border', "solid 2px #ff0000");
});
});
</script>
The code works fine but I only want 1 image bordered at a time. So is there any way to modify the code so that it clears all borders or even add a white border so it's not visible to add the images with class "cat" and then add the red border to the latest clicked image?
You can do this:
$(function () {
$("img.cat").click(function() {
$("img.cat").css("border","none"); // erases the border on other images
$(this).css('border', "solid 2px #ff0000");
});
});
You just select all the images with the same class again and remove their borders, then continue with setting the border of the one that was just clicked.
Also, as long as you're using jQuery 1.7 (you can use delegate() for earlier versions), then it's recommended that you use on() to attach event handlers. This would look like this:
$(document).on("click", "img.cat", function(){
$("img.cat").css("border","none");
});
To make it more efficient, you could select the closest parent element that all the elements share. For example, if the images were all children of a div with the id imageContainer, you would do this:
$("#imageContainer").on("click", "img.cat", function(){
$("img.cat").css("border","none");
});
Before you set the border on the img that was clicked, clear all borders matching your selector.
$("img.cat").click(function() {
$("img.cat").css('border', '0');
$(this).css('border', "solid 2px #ff0000");
});
This should do:
<script>
$(function () {
$("img.cat").click(function() {
$("img.cat").css('border', "none");
$(this).css('border', "solid 2px #ff0000");
});
});
</script>
<script>
$("img.cat").click(function() {
$("img.cat").each(function(){
$(this).css('border', "none");
});
$(this).css('border', "solid 2px #ff0000");
});
</script>
If you have a bunch of images on the page with one class, what you can do is dynamically set or clear the class that indicates the border. That means you don't actually need to mess with the CSS at all. Simply create two CSS properties, one for images without a border, and one for all those with a border, and then set them as appropriate. Here is my example:
<!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>
