I have a 3 x 4 cards, it's a memory game. So to able to play, you need to guess 2 matches.
$('.card').click(function() {
$('.front').toggle();
$('.back').toggle();
});
.card .back {
display: none;
}
.card {
margin: 8px;
}
.card .front {
background-color: blue;
}
.back,
.front {
color: white;
width: 100px;
height: 150px;
}
.card .back {
background-color: red;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<div class="col-xs-4">
<div class="card" id="dog">
<div class="front">
image here
</div>
<div class="back">
back card
</div>
</div>
</div>
<div class="col-xs-4">
<div class="card" id="cat">
<div class="front">
image here
</div>
<div class="back">
back card
</div>
</div>
</div>
<div class="col-xs-4">
<div class="card" id="dog">
<div class="front">
image here
</div>
<div class="back">
back card
</div>
</div>
</div>
<div class="col-xs-4">
<div class="card" id="cat">
<div class="front">
image here
</div>
<div class="back">
back card
</div>
</div>
</div>
</div>
Based from the snippet, if I click a one card, all of the cards flipped, which is wrong.
Now my problem is, how do I fix this through jquery?
What you're doing wrong is that you're targeting every single element with the class front and back, because of your selectors (.front and .back).
To fix this, you need to tell jQuery that you're targeting only the elements within the element the user just clicked, and for that you use the find function. This makes sure that jQuery checks just the elements in the one you target in and not every single element in the document.
So, where you wrote:
$('.card').click(function(){
$('.front').toggle();
$('.back').toggle();
});
You need to change it to
$('.card').click(function(){
$(this).find('.front').toggle();
$(this).find('.back').toggle();
});
Simple as that.
$('.card').click(function() {
$(this).find('.front').toggle();
$(this).find('.back').toggle();
});
.card .back {
display: none;
}
.card {
margin: 8px;
}
.card .front {
background-color: blue;
}
.back,
.front {
color: white;
width: 100px;
height: 150px;
}
.card .back {
background-color: red;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<div class="col-xs-4">
<div class="card" id="dog">
<div class="front">
image here
</div>
<div class="back">
back card
</div>
</div>
</div>
<div class="col-xs-4">
<div class="card" id="cat">
<div class="front">
image here
</div>
<div class="back">
back card
</div>
</div>
</div>
<div class="col-xs-4">
<div class="card" id="dog">
<div class="front">
image here
</div>
<div class="back">
back card
</div>
</div>
</div>
<div class="col-xs-4">
<div class="card" id="cat">
<div class="front">
image here
</div>
<div class="back">
back card
</div>
</div>
</div>
</div>
$('.card').click(function(){
$(this).find('.front').toggle();
$(this).find('.back').toggle();
});
That's it
You need to use this to select only some elements with this class. Try this $(this).find(".front").toggle().
Use this:
$('.card').click(function(){
$(this).find('.front').toggle();
$(this).find('.back').toggle();
});
You selected with jQuery all the .front and all .backclasses, you should use that :
$('.card').click(function(){
var $this = $(this);
$this.find('.front').toggle();
$this.find('.back').toggle();
});
When you do
$('.card').click(function() {
$('.front').toggle();
$('.back').toggle();
});
You attach a click listener to all elements with class card. Inside, you toggle all elements with class front and back. You need to be toggling just the front and back that are inside the clicked card. $(this).find(".front").toggle(); does just that.
Simply Read Here
$('.front , .back' , this).toggle();
$('.card').click(function(){
$('.front , .back' , this).toggle();
});
.card .back{
display:none;
}
.card {
margin:8px;
}
.card .front{
background-color: blue;
}
.back, .front{
color:white;
width:100px;
height:150px;
}
.card .back{
background-color:red;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<div class="col-xs-4">
<div class="card" id="dog">
<div class="front">
image here
</div>
<div class="back">
back card
</div>
</div>
</div>
<div class="col-xs-4">
<div class="card" id="cat">
<div class="front">
image here
</div>
<div class="back">
back card
</div>
</div>
</div>
<div class="col-xs-4">
<div class="card" id="dog">
<div class="front">
image here
</div>
<div class="back">
back card
</div>
</div>
</div>
<div class="col-xs-4">
<div class="card" id="cat">
<div class="front">
image here
</div>
<div class="back">
back card
</div>
</div>
</div>
</div>
Related
I have a list of div with the same class. Each div contains other divs, .header, .body, .footer. When I hover on one of the elements inside one div, for example .header, I need to add/remove a class on the another .footer element inside the same div.
The problem is when I hover one .header - I'm adding class to all .footer elements inside all other div's but I need to add new class only to the .footer inside the current div.
$(document).ready(function() {
$('.header').hover(function() {
$('.footer').addClass('active');
}, function() {
$('.footer').removeClass('active');
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="list">
<div class="list_item">
<div class="header"></div>
<div class="body"></div>
<div class="footer"></div>
</div>
<div class="list_item">
<div class="header"></div>
<div class="body"></div>
<div class="footer"></div>
</div>
<div class="list_item">
<div class="header"></div>
<div class="body"></div>
<div class="footer"></div>
</div>
</div>
You could use the :hover pseudo in CSS and the general sibling combinator selector ~
.list_item:hover .header:hover ~ .footer {
background: red;
}
<div class="list">
<div class="list_item">
<div class="header">Hover me</div>
<div class="body">B</div>
<div class="footer">F</div>
</div>
<div class="list_item">
<div class="header">Hover me</div>
<div class="body">B</div>
<div class="footer">F</div>
</div>
<div class="list_item">
<div class="header">Hover me</div>
<div class="body">B</div>
<div class="footer">F</div>
</div>
</div>
otherwise, if you cannot rely on .footer being a next sibling - use jQuery
jQuery(function($) {
$('.header').hover(function() {
$(this).closest('.list_item').find('.footer').toggleClass('active');
});
});
.active {
background: red;
}
<div class="list">
<div class="list_item">
<div class="header">Hover me</div>
<div class="body">B</div>
<div class="footer">F</div>
</div>
<div class="list_item">
<div class="header">Hover me</div>
<div class="body">B</div>
<div class="footer">F</div>
</div>
<div class="list_item">
<div class="header">Hover me</div>
<div class="body">B</div>
<div class="footer">F</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
You should be doing it relative to this (which is the current hovered header) and you can use nextAll if that is the only footer in the grouping:
$('.header').hover(function() {
$(this).nextAll('.footer').addClass('active');
},
function() {
$(this).nextAll('.footer').removeClass('active');
});
.active {
color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="list">
<div class="list_item">
<div class="header"> header </div>
<div class="body"> body </div>
<div class="footer"> footer </div>
</div>
<div class="list_item">
<div class="header"> header </div>
<div class="body"> body </div>
<div class="footer"> footer </div>
</div>
<div class="list_item">
<div class="header"> header </div>
<div class="body"> body </div>
<div class="footer"> footer </div>
</div>
</div>
Yes can try below code snippet, I have tested it already.
$(document).ready(function() {
$('.header').hover(function(){
$(this).siblings(".footer").addClass('active');
},
function(){
$(this).siblings(".footer").removeClass('active');
});
});
You need to add different ID property all some div, get $('#footer3') and change it
I'm having one section of a site which I wondered how can I replicate it using bootstrap, I tried couple of ways but I couldn't get the same result.
I cannot figure out which one will be a row and which one will be a column.
Here is a picture of the section:
Thank you in advance!
I am using bootstrap 3.4.1 if that matters.
Pretty straightforward, you just need to do some nesting of the rows for the bottom. Here is a working solution.
.block {
background-color: red;
border: 5px solid white;
min-height: 50px;
color: white;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-sm-6 block">
content
</div>
<div class="col-sm-6 block">
content
</div>
</div>
<div class="row">
<div class="col-sm-9">
<div class="row">
<div class="col-sm-12 block">
content
</div>
<div class="col-sm-6 block">
content
</div>
<div class="col-sm-6 block">
content
</div>
</div>
</div>
<div class="col-sm-3 block">
content
</div>
</div>
</div>
I am making a simple memory game in jQuery. I have eight img tags and the 'imgs' array with eight pictures (they double). I want every img have a unique src from the 'imgs' array (so that every img element has its' match). Can anyone help me so that the images don't repeat? I know it could be done in pure JS but I need jQuery... Thank you very much for your time :)
$(document).ready(() => {
const imgs = ['https://img.icons8.com/color/100/000000/smurf.png',
'https://img.icons8.com/color/96/000000/cookie-monster.png',
'https://img.icons8.com/color/96/000000/chewbacca.png',
'https://img.icons8.com/color/96/000000/avatar.png',
'https://img.icons8.com/color/100/000000/smurf.png',
'https://img.icons8.com/color/96/000000/cookie-monster.png',
'https://img.icons8.com/color/96/000000/chewbacca.png',
'https://img.icons8.com/color/96/000000/avatar.png'];
$('.card').flip();
$('img').each((i, item) => {
$(item).attr('src', function() {
const imgsCopy = imgs.slice();
const src = imgsCopy.splice(Math.floor(Math.random() * imgsCopy.length), 1)
return src
})
})
});
body {
margin: 0 auto;
text-align: center;
}
#game-container {
padding: 3% 10%;
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-content: center;
justify-content: center;
}
.card {
width: 200px;
height: 200px;
margin: 20px 20px;
}
.front {
background-color: lightblue;
}
.back {
background-color: lightskyblue;
box-sizing: border-box;
padding: 25% 20%;
}
<!DOCTYPE html>
<html>
<head>
<title>Memory Game</title>
<link rel="stylesheet" type="text/css" href="memory.css" />
</head>
<body>
<div id="game-container">
<!--CARD 1-->
<div class="card">
<div class="front">
</div>
<div class="back">
<img src="">
</div>
</div>
<!--THE END OF CARD 1-->
<!--CARD 2-->
<div class="card">
<div class="front">
</div>
<div class="back">
<img src="">
</div>
</div>
<!--THE END OF CARD 2-->
<!--CARD 3-->
<div class="card">
<div class="front">
</div>
<div class="back">
<img src="">
</div>
</div>
<!--THE END OF CARD 3-->
<!--CARD 4-->
<div class="card">
<div class="front">
</div>
<div class="back">
<img src="">
</div>
</div>
<!--THE END OF CARD 4-->
<!--CARD 5-->
<div class="card">
<div class="front">
</div>
<div class="back">
<img src="">
</div>
</div>
<!--THE END OF CARD 5-->
<!--CARD 6-->
<div class="card">
<div class="front">
</div>
<div class="back">
<img src="">
</div>
</div>
<!--THE END OF CARD 6-->
<!--CARD 7-->
<div class="card">
<div class="front">
</div>
<div class="back">
<img src="">
</div>
</div>
<!--THE END OF CARD 7-->
<!--CARD 8-->
<div class="card">
<div class="front">
</div>
<div class="back">
<img src="">
</div>
</div>
<!--THE END OF CARD 8-->
</div>
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="https://cdn.rawgit.com/nnattawat/flip/master/dist/jquery.flip.min.js"></script>
<script src="memory.js"></script>
</body>
</html>
OK, I made a slight mistake! I took out the const imgsCopy = imgs.slice(); out of the jQuery 'each' statement and it works fine! :) Thx again for your time!
$(document).ready(() => {
$('.card').flip();
const imgs = ['https://img.icons8.com/color/100/000000/smurf.png',
'https://img.icons8.com/color/96/000000/cookie-monster.png',
'https://img.icons8.com/color/96/000000/chewbacca.png',
'https://img.icons8.com/color/96/000000/avatar.png',
'https://img.icons8.com/color/100/000000/smurf.png',
'https://img.icons8.com/color/96/000000/cookie-monster.png',
'https://img.icons8.com/color/96/000000/chewbacca.png',
'https://img.icons8.com/color/96/000000/avatar.png'];
const imgsCopy = imgs.slice();
$('img').each((i, item) => {
$(item).attr('src', function() {
const src = imgsCopy.splice(Math.floor(Math.random() * imgsCopy.length), 1)
return src
})
})
});
I'm working on a project available on JSFiddle. As you can notice, there are 6 items displayed and I would like to make a carousel to display 3 items per slide. After researching this issue, I find this awesome project on Codepen.
Each item of my project is represented by the following code:
<div class="wrapper">
<img src="https://photos-2.dropbox.com/t/2/AACS3GcxUnMu4DpsfC5pF-zF55I8WHf1blL4AvkQULu1Gw/12/226666032/jpeg/32x32/1/_/1/2/3.jpg/EO2pmKoBGHsgAigC/iV0gUV38M-Y4EoQJWevkk6_etV3EZi1baTQUzImrReM?size=1024x768&size_mode=3" alt="" />
<div class="overlay">
<h2 class="header">A Movie in the Park: Kung Fu Panda</h2>
</div>
</div>
while the item on Codepen is represented by this one:
<div class="item active">
<div class="col-xs-4">
<img src="http://placehold.it/300/f44336/000000" class="img-responsive">
</div>
</div>
Whenever I try to remove the item's code in Codepen and place my item's code from JSFiddle, the slider stops working.
Please let me know how to solve this problem.
Is this what you wanted? Please check fiddle, you will understand, why it wasn't working. You may have missed some libraries and CSS.
$('#theCarousel').carousel({
interval: false
})
$('.multi-item-carousel .item').each(function(){
var next = $(this).next();
if (!next.length) {
next = $(this).siblings(':first');
}
next.children(':first-child').clone().appendTo($(this));
if (next.next().length>0) {
next.next().children(':first-child').clone().appendTo($(this));
}
else {
$(this).siblings(':first').children(':first-child').clone().appendTo($(this));
}
});
.multi-item-carousel{
.carousel-inner{
> .item{
transition: .6s ease-in-out all;
}
.active{
&.left{
left:-33%;
}
&.right{
left:33%;
}
}
.next{
left: 33%;
}
.prev{
left: -33%;
}
}
.carouse-control{
&.left, &.right{
background-image: none;
}
}
#media all and (transform-3d), (-webkit-transform-3d) {
&{
.carousel-inner {
> .item{
transition: .6s ease-in-out all;
-webkit-backface-visibility: visible;
backface-visibility: visible;
-webkit-perspective: none;
-webkit-transform: none!important;
transform: none!important;
}
}
}
}
}
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<div class="container">
<div class="col-md-8 col-md-offset-2">
<div class="carousel slide multi-item-carousel" id="theCarousel">
<div class="carousel-inner">
<div class="item active">
<div class="col-xs-4 wrapper">
<img src="http://placehold.it/300/f44336/000000" class="img-responsive">
</div>
</div>
<div class="item">
<div class="col-xs-4">
<img src="http://placehold.it/300/e91e63/000000" class="img-responsive">
<div class="overlay">
<h5 class="header">A Movie in the Park: Kung Fu Panda</h5>
</div>
</div>
</div>
<div class="item">
<div class="col-xs-4">
<img src="http://placehold.it/300/9c27b0/000000" class="img-responsive">
<h5 class="header">Batman Return</h5>
</div>
</div>
<div class="item">
<div class="col-xs-4">
<img src="http://placehold.it/300/673ab7/000000" class="img-responsive">
<h5 class="header">Deadpool</h5>
</div>
</div>
<div class="item">
<div class="col-xs-4">
<img src="http://placehold.it/300/4caf50/000000" class="img-responsive">
</div>
</div>
<div class="item">
<div class="col-xs-4">
<img src="http://placehold.it/300/8bc34a/000000" class="img-responsive">
</div>
</div>
</div>
<a class="left carousel-control" href="#theCarousel" data-slide="prev"><i class="glyphicon glyphicon-chevron-left"></i></a>
<a class="right carousel-control" href="#theCarousel" data-slide="next"><i class="glyphicon glyphicon-chevron-right"></i></a>
</div>
</div>
</div>
Read the carousel documentation and notice the format of each item (specifically the addition of .item and .active).
This wrapper around each image is making it so that 3 elements are displayed per row:
<div class="col-xs-4">
...
</div>
(in comparison, using .col-xs-12 would indicate 1 image per displayed row, and .col-xs-6 would indicate 2 images per displayed row)
I am trying to do the following:
There are multiple "title" and "text" divs on a page.
Upon loading the page only the first text is visible.
When clicking on any title, its text slides down and all other texts slide up.
So far I came up with the following:
HTML:
<div class="row clearfix">
<div class="title"></div>
<div class="text"></div>
</div>
<div class="row clearfix">
<div class="title"></div>
<div class="text"></div>
</div>
<div class="row clearfix">
<div class="title"></div>
<div class="text"></div>
</div>
<div class="row clearfix">
<div class="title"></div>
<div class="text"></div>
</div>
jQuery:
$('.title').click(function () {
$(this).next().slideToggle();
})
https://jsfiddle.net/e3okos3e/
However, this is very basic.
Can you tell me how to select every text other than the selected title's one?
How to make only the first one visible at loading?
So, if all of the text divs are hidden by default, then do this:
$(document).ready(function(){
$('.title').click(function () {
$('.active').slideToggle().removeClass('active');
$(this).next().slideToggle().addClass('active');
})
});
.title {
width: 100px;
height: 20px;
border: 1px solid #cc0;
}
.text {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row clearfix">
<div class="title"></div>
<div class="text">text1</div>
</div>
<div class="row clearfix">
<div class="title"></div>
<div class="text">text2</div>
</div>
<div class="row clearfix">
<div class="title"></div>
<div class="text">text3</div>
</div>
<div class="row clearfix">
<div class="title"></div>
<div class="text">text4</div>
</div>
Fairly straightforward using not()
var $text = $('.text');// cache elements
$('.title').click(function () {
var $next = $(this).next().slideDown();// or slideToggle()
$text.not($next).slideUp();
});
DEMO