Want a border around image when clicked on and the border removed after clicked on the second time
Want a border around image when clicked on and the border removed after clicked on the second time
I want to make it so when you click on an image a border shows then when you click on it for the second time it goes away. I've tried many different ways, but first I can't figure out how to get the images to show initially without the borders (only when you click on them the border goes away). From there is when i want to border/disappear when clicked on.
Also, I know you can do in-line css styling in JS, but I don't want to do that. If it's needed though then let me know. I am still learning!
http://jsbin.com/joxuyez/1/edit?html,css,js,output
HTML
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="Practice Refactoring to jQuery">
<script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
<meta charset="utf-8">
<title>Practice Refactoring to jQuery</title>
</head>
<body>
<div id="refrigerator">
<div class="oranges">
<img src="https://whydyoueatthat.files.wordpress.com/2011/12/oranges-vitamin-c-lg.jpg">
</div>
<div class="apples">
<img src="http://lymanorchards.com/files/7013/6725/1487/apples.jpg">
</div>
<div class="grapes">
<img src="https://images.homedepot-static.com/productImages/23e05da4-8bdf-4408-8ca0-e9c8c9a780df/svn/van-zyverden-fruit-trees-plants-11425-64_1000.jpg">
</div>
</div>
</body>
</html>
CSS
#refrigerator {
background-color: #FFFFFF;
width: 200px;
border: 5px solid #333333;
}
#refrigerator img {
width: 100px;
display: block;
margin: 30px auto;
}
.oranges {
border: 5px solid orange;
}
.apples {
border: 5px solid red;
}
.grapes {
border: 5px solid purple;
}
JS
$(document).ready(function() {
alert("Pick a healthy snack from the refrigerator!");
});
$('.oranges').click (function(event) {
$('.oranges').css("border","none");
alert("You chose an orange!");
});
$('.apples').click (function(event) {
alert("You chose an apple!");
});
$('.grapes').click (function(event) {
alert("You chose grapes!");
});
4 Answers
4
Simply toggle a class with each click using toggleClass().
toggleClass()
Here I updated your CSS a little, and shorten the script, to show how-to.
Why having a border already set, and just change color, you avoid the element from moving, which it otherwise does by default when changing its size.
Stack snippet
$(document).ready(function() {
//alert("Pick a healthy snack from the refrigerator!");
});
$('.oranges, .apples, .grapes').click( function(event) {
$(this).toggleClass("showborder");
if (this.className.includes('showborder')) {
alert("You selected " + this.className.replace(" showborder","") )
}
});
#refrigerator {
background-color: #FFFFFF;
width: 200px;
border: 5px solid #333333;
}
#refrigerator img {
width: 100px;
display: block;
margin: 30px auto;
}
.oranges, .apples, .grapes {
border: 5px solid transparent;
}
.oranges.showborder {
border-color: orange;
}
.apples.showborder {
border-color: red;
}
.grapes.showborder {
border-color: purple;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="refrigerator">
<div class="oranges">
<img src="https://whydyoueatthat.files.wordpress.com/2011/12/oranges-vitamin-c-lg.jpg">
</div>
<div class="apples">
<img src="http://lymanorchards.com/files/7013/6725/1487/apples.jpg">
</div>
<div class="grapes">
<img src="https://images.homedepot-static.com/productImages/23e05da4-8bdf-4408-8ca0-e9c8c9a780df/svn/van-zyverden-fruit-trees-plants-11425-64_1000.jpg">
</div>
</div>
Updated based on a comment.
If you would want to allow only one at the time, you could do something like this
Stack snippet
$(document).ready(function() {
//alert("Pick a healthy snack from the refrigerator!");
});
$('.oranges, .apples, .grapes').click(function(event) {
if ($(this).hasClass("showborder")) {
$(this).removeClass("showborder");
} else {
$(this).parent().find(".showborder").removeClass("showborder");
$(this).addClass("showborder");
if (this.className.includes('showborder'))
alert("You selected " + this.className.replace(" showborder","") )
}
});
#refrigerator {
background-color: #FFFFFF;
width: 200px;
border: 5px solid #333333;
}
#refrigerator img {
width: 100px;
display: block;
margin: 30px auto;
}
.oranges,
.apples,
.grapes {
border: 5px solid transparent;
}
.oranges.showborder {
border-color: orange;
}
.apples.showborder {
border-color: red;
}
.grapes.showborder {
border-color: purple;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="refrigerator">
<div class="oranges">
<img src="https://whydyoueatthat.files.wordpress.com/2011/12/oranges-vitamin-c-lg.jpg">
</div>
<div class="apples">
<img src="http://lymanorchards.com/files/7013/6725/1487/apples.jpg">
</div>
<div class="grapes">
<img src="https://images.homedepot-static.com/productImages/23e05da4-8bdf-4408-8ca0-e9c8c9a780df/svn/van-zyverden-fruit-trees-plants-11425-64_1000.jpg">
</div>
</div>
Done. If I want to allow to only select one image at a time. For example: I choose Orange then apple, only apple shows as selected (not both). Do I use the .removeClass() method?
– rainbowpudding
13 hours ago
@rainbowpudding Added a 2nd sample to show how to do that.
– LGSon
13 hours ago
you can use .toggleClass with JQuery to handle removing and adding classes. Refer to this JSFiddle I put together. https://jsfiddle.net/xpvt214o/334757/
.toggleClass
In JQuery you can make a click handler to target the exact box you're clicking with $(this)
$(this)
Example:
var box = $(".box")
box.on("click", function(){
$(this).toggleClass('border')
})
If you need each box to be a different color you can do something like this:
.box.border{
border-width: 3px;
border-style: solid;
}
.box1{
border-color: orange;
}
.box2{
border-color: red;
}
.box3{
border-color: blue;
}
With this method, you can have a .border class whichcontrols the style and width of the border. The different classes such as .box1 can alter the border color.
.border
.box1
<div>
<div class="box box1">box 1</div>
<div class="box box2">box 2</div>
<div class="box box3">box 31</div>
</div>
Assigned like that. Hope this helps.
It definitely does, definitely gives me a new way of going about it!
– rainbowpudding
Jul 1 at 20:02
As you are still learning, i have a solution for you in a simple way, though better methods are available but definitely this method will help you to understand whats happening. I have made couple of changes in your CSS and JS file.
It also available at https://jsfiddle.net/9s37v6tu/11/
$(document).ready(function() {
alert("Pick a healthy snack from the refrigerator!");
});
$('.oranges').click (function(event) {
if($('.oranges').hasClass('orange-border'))
{
$('.oranges').removeClass('orange-border');
}
else
{
$('.oranges').addClass('orange-border');
}
alert("You chose an orange!");
});
$('.apples').click (function(event) {
if($('.apples').hasClass('apple-border'))
{
$('.apples').removeClass('apple-border');
}
else
{
$('.apples').addClass('apple-border');
}
alert("You chose an apple!");
});
$('.grapes').click (function(event) {
if($('.grapes').hasClass('grape-border'))
{
$('.grapes').removeClass('grape-border');
}
else
{
$('.grapes').addClass('grape-border');
}
alert("You chose grapes!");
});
#refrigerator {
background-color: #FFFFFF;
width: 200px;
border: 5px solid #333333;
}
#refrigerator img {
width: 100px;
display: block;
margin: 30px auto;
}
.orange-border {
border: 5px solid orange;
}
.apple-border {
border: 5px solid red;
}
.grape-border {
border: 5px solid purple;
}
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="Practice Refactoring to jQuery">
<script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
<meta charset="utf-8">
<title>Practice Refactoring to jQuery</title>
</head>
<body>
<div id="refrigerator">
<div class="oranges">
<img src="https://whydyoueatthat.files.wordpress.com/2011/12/oranges-vitamin-c-lg.jpg">
</div>
<div class="apples">
<img src="http://lymanorchards.com/files/7013/6725/1487/apples.jpg">
</div>
<div class="grapes">
<img src="https://images.homedepot-static.com/productImages/23e05da4-8bdf-4408-8ca0-e9c8c9a780df/svn/van-zyverden-fruit-trees-plants-11425-64_1000.jpg">
</div>
</div>
</body>
</html>
I am still learning! Thank you for this, it does help me understand more of what's going on.
– rainbowpudding
Jul 1 at 20:07
$(function(){
$('.box').click(function(){
$('.main div').removeClass('border');
$(this).addClass('border');
var index = $(this).index();
if(index == 0){alert('YOU CLICKED RED BOX!!!');};
if(index == 1){alert('YOU CLICKED GREEN BOX!!!');};
if(index == 2){alert('YOU CLICKED BLUE BOX!!!');};
});
});
.box{
display:inline-block;
width:100px;
height:100px;
margin:10px;
}
.red{
background:red;
}
.green{
background:green;
}
.blue{
background:blue;
}
.border{
border:5px solid black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<body>
<div class="main">
<div class="box red"></div>
<div class="box green"></div>
<div class="box blue"></div>
</div>
</body>
</html>
Appreciate the response!
– rainbowpudding
Jul 1 at 20:03
By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.
@rainbowpudding You're welcome...and now you can upvote answers too ;)
– LGSon
Jul 1 at 20:08