I spent few hours in this particular code but seems not working for me . Basically i was trying to onclick the button then change text from 签到 to 签到成功 with the condition of if 签到成功 then display image else set the image to display:none .
Can you try to help me with this code , Thanks you .
HTML :
<div class="checkLevel" id="damonkEYkEY">
<span data-bind="css: safeLevelClass"> </span>
签到
<img src="images/Calendartest.png" alt="" class="calendarshow" style="display:none">
</div>
jQUERY :
$(document).ready(function() {
$("#damonkEYkEY").click(function(e) {
e.preventDefault();
$(".checkLevel a").text(function(i, t) {
return t == '签到' ? '签到成功' : '签到';
});
if($(".checkLevel a").text('签到成功')){
$(".calendarshow").css("display", "block");}
else{
$(".calendarshow").css("display", "none");}
}
});
});
CSS :
.calendarshow {
display: inline-block;
bottom: -180px;
position: absolute;
left: 118px;
}
There was a redundant closing curly bracket in your code. So removed it and replace if($(".checkLevel a").text('签到成功')){ with if($(".checkLevel a").text()=='签到成功'){.
Please check below snippet.
$(document).ready(function() {
$("#damonkEYkEY").click(function(e) {
e.preventDefault();
$(".checkLevel a").text(function(i, t) {
return t == '签到' ? '签到成功' : '签到';
});
if($(".checkLevel a").text()=='签到成功'){
$(".calendarshow").css("display", "block");}
else{
$(".calendarshow").css("display", "none");}
});
});
.calendarshow {
display: inline-block;
bottom: -180px;
position: absolute;
left: 118px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="checkLevel" id="damonkEYkEY">
<span data-bind="css: safeLevelClass"> </span>
签到
<img src="images/Calendartest.png" alt="" class="calendarshow" style="display:none">
</div>
$(document).ready(function() {
$("#damonkEYkEY").click(function(e) {
e.preventDefault();
$(".checkLevel a").text(function(i, t) {
return t == '签到' ? '签到成功' : '签到';
});
if ($(".checkLevel a").text() == '签到成功') {
$(".calendarshow").css("display", "block");
} else {
$(".calendarshow").css("display", "none");
}
});
});
.calendarshow {
display: inline-block;
bottom: -180px;
position: absolute;
left: 118px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="checkLevel" id="damonkEYkEY">
<span data-bind="css: safeLevelClass"> </span>
签到
<img src="images/Calendartest.png" alt="" class="calendarshow" style="display:none">
</div>
You have extra }
Related
I'm learning JS (without JQuery for now!) and got a problem with my code and need your help!
I'm working on a code which fetch the image title out of a database and put it in a kinda list.
If the user clicks on the title, a other div box pops up and shows the image describtion.
My Problem is that my code only display the first "img_descr" in each popup box.
And because the "img_title" list is dynamically (it depends on what the user types in the search bar) it makes it even more a bit difficult.
Below I will paste a simple version of my code with php code and below that i will past a snippet. (by clicking on the "play" button you can see a simulation of my code).
Click on each title and you will see, only 1 describtion will show up for each title.
▽ Here you can see a simple version of my code with PHP code ▽
<!DOCTYPE html>
<html>
<head>
<title>XY</title>
<meta charset="UTF-8"/>
</head>
<body>
<div id="frame">
<?php
$db = mysqli_connect("localhost", "root", "", "xy");
$result = mysqli_query($db, "SELECT * FROM images");
while ($row = mysqli_fetch_array($result))
{
echo "<div class='click_box'>";
echo "<a class='img_id'>ID: ".$row['img_id']."</a><br>";
echo "<div class='img_title'><a>Title: <b>".$row['img_title']."</b></a></div>";
echo "</div>";
echo "<div id='popup'>";
echo "<div class='img_descr'><a>Descr: <b>".$row['img_descr']."</b></a></div>";
echo "</div>";
}
?>
</div>
<style>
*{
font-family: arial;
padding: 0px;
margin: 0px;
}
body{
background-color:rgba(100,100,100);
}
.click_box{
height: 50px;
width: 150px;
background-color:rgba(150,150,150);
margin-top: 10px;
margin-left: 10px;
}
.img_id{
color:rgba(100,100,100);
}
.img_title{
color: white;
}
.img_title:hover{
cursor: pointer;
color:rgba(50,50,50);
}
#popup{
position: absolute;
height: 230px;
width: 350px;
top: 10px;
left: 170px;
background-color:rgba(50,50,50);
opacity: 0;
}
.img_descr{
color: white;
}
</style>
<script>
let myarray = Array.from(document.querySelectorAll('.img_title'))
let bg = document.getElementById('popup');
myarray.map((e) => {
e.addEventListener("click", e=>{
// retrieve the actual value of opacity for bg
bgStyle = window.getComputedStyle(bg, null).getPropertyValue("opacity");
// if the opacity is "0" make it "1" otherwhise make it "0"
let opacity = bgStyle == "0" ? "1" : 0;
// use the opacity variable
bg.setAttribute("style", `opacity:${opacity};`);
})
})
</script>
</body>
</html>
▽ Here you can see a snippet i created, but without PHP code ▽
there you can see, only the first "img_descr" do work!
let myarray = Array.from(document.querySelectorAll('.img_title'))
let bg = document.getElementById('popup');
myarray.map((e) => {
e.addEventListener("click", e=>{
// retrieve the actual value of opacity for bg
bgStyle = window.getComputedStyle(bg, null).getPropertyValue("opacity");
// if the opacity is "0" make it "1" otherwhise make it "0"
let opacity = bgStyle == "0" ? "1" : 0;
// use the opacity variable
bg.setAttribute("style", `opacity:${opacity};`);
})
})
*{
font-family: arial;
padding: 0px;
margin: 0px;
}
body{
background-color:rgba(100,100,100);
}
.click_box{
height: 50px;
width: 150px;
background-color:rgba(150,150,150);
margin-top: 10px;
margin-left: 10px;
}
.img_id{
color:rgba(100,100,100);
}
.img_title{
color: white;
}
.img_title:hover{
cursor: pointer;
color:rgba(50,50,50);
}
#popup{
position: absolute;
height: 230px;
width: 350px;
top: 10px;
left: 170px;
background-color:rgba(50,50,50);
opacity: 0;
}
.img_descr{
color: white;
}
<!DOCTYPE html>
<html>
<head>
<title>XY</title>
<meta charset="UTF-8"/>
</head>
<body>
<div id="frame">
<div class='click_box'>
<a class='img_id'>ID: 1</a><br>
<div class='img_title'><a>Title: <b>Golden Retriever</b></a></div>
</div>
<div id='popup'>
<div class='img_descr'><a>Descr: <b>UK:DFYDFBAERSDFBYDFBYDFydfbydfBaeydfb1311y</b></a></div>
</div>
<div class='click_box'>
<a class='img_id'>ID: 2</a><br>
<div class='img_title'><a>Title: <b>Appenzeller Sennenhund</b></a></div>
</div>
<div id='popup'>
<div class='img_descr'><a>Descr: <b>Swiss:erydfydfbrehaydydfbydfydbaerydf2ydfb</b></a></div>
</div>
<div class='click_box'>
<a class='img_id'>ID: 3</a><br>
<div class='img_title'><a>Title: <b>German Shepard</b></a></div>
</div>
<div id='popup'>
<div class='img_descr'><a>Descr: <b>Germany:ydf3d1fby3df1by3dfb6ydfb31ydf31ydf</b></a></div>
</div>
<div class='click_box'>
<a class='img_id'>ID: 4</a><br>
<div class='img_title'><a>Title: <b>Alaskan Klee Kai</b></a></div>
</div>
<div id='popup'>
<div class='img_descr'><a>Descr: <b>USA:f3ngxfgxfgnxfxfgnxfg3xf31gnxfgner6ae13</b></a></div>
</div>
</div>
</body>
</html>
It seems it have to do something with the "id="popup"... and if i change the popup div from "id" to "class", change "document.getElementById" to "document.getElementsByClassName" and change the css "#popup" to ".popup", nothing work then.
If you would make it totally different, please let me know. (i'm a js beginner)
first of all, you have to replace the multiple popup ids with classes (in css and html)
Here is the js code with the corrections.
let myarray = Array.from(document.querySelectorAll('.click_box'));
myarray.map((e) => {
e.addEventListener("click", event => {
let popups = Array.from(document.querySelectorAll('.popup'));
popups.map((popup) => {
popup.setAttribute("style", 'opacity:0');
})
let bg = e.nextElementSibling;
bg.setAttribute("style", 'opacity:1');
})
})
here is the process :
get the click boxes (notice that I use .click_box as my click target)
get all popups and hide them using opacity: 0
get the element after the clicked one using nextElementSibling. as the click event is on clickBox, the next element will be the popup
show the popup using opacity: 1
jsfiddle here : https://jsfiddle.net/1L0ehpuy/18/
warning : this code depends on the html markup to work properly : you have to keep the popup right after the click_box element otherwise the nextElementSibling won't be the popup
here is the php code with classes instead of ids. with this php code and the js above, everything should be fine
<?php
$db = mysqli_connect("localhost", "root", "", "xy");
$result = mysqli_query($db, "SELECT * FROM images");
while ($row = mysqli_fetch_array($result)) {
echo "<div class='click_box'>";
echo "<a class='img_id'>ID: ".$row['img_id']."</a><br>";
echo "<div class='img_title'><a>Title: <b>".$row['img_title']."</b></a></div>";
echo "</div>";
echo "<div class='popup'>";
echo "<div class='img_descr'><a>Descr: <b>".$row['img_descr']."</b></a></div>";
echo "</div>";
}
?>
new version to hide the popup on 2nd click
let myarray = Array.from(document.querySelectorAll('.click_box'));
myarray.map((e) => {
e.addEventListener("click", event => {
let bg = e.nextElementSibling;
if (bg.style.opacity == 1) {
bg.setAttribute("style", 'opacity:0');
} else {
let popups = Array.from(document.querySelectorAll('.popup'));
popups.map((popup) => {
popup.setAttribute("style", 'opacity:0');
})
bg.setAttribute("style", 'opacity:1');
}
})
})
there are not many changes : at the begining of the function, I just added a if to check if the related popup is already shown. if so, I hide it.
fiddle here : https://jsfiddle.net/1L0ehpuy/21/
This is new, edited version of my code. I've transfered every jQuery code into pure JavaScript. I've also tried to comment my JS code so it will be easier for you to understand it.
//Pass the clicked element in function 'openPopup' and name it as 'el'
//We are passing the clicked element from the HTML, you can see it at "onclick='openPopup(this)'"
//The word 'this' is a variable for current element
function openPopup(el){
var parent = el.parentElement;
var child = null;
//Loop through children of parent element
for (var i = 0; i <= parent.childNodes.length; i++) {
//Only if children has class, check if children's class contains 'popup'
if(parent.childNodes[i].classList){
if (parent.childNodes[i].classList.contains("popup")) {
//If we have the popup element, add it to a variable 'child'
child = parent.childNodes[i];
break;
}
}
}
//If assigned popup is opened
if(child.classList.contains("visible")){
//Remove class 'visible' from the popup element (popup is stored in 'child' variable)
child.classList.remove("visible");
} else {
//Close all popups by removing class 'visible' from all popups
var popups = document.getElementsByClassName("popup");
for (var i = 0; i < popups.length; i++) {
popups[i].classList.remove("visible");
}
//Add class 'visible' to popup assigned to our button (still stored in 'child' variable)
child.classList.add("visible");
}
}
*{
font-family: arial;
padding: 0px;
margin: 0px;
}
body{
background-color:rgba(100,100,100);
}
.click_box{
height: 50px;
width: 150px;
background-color:rgba(150,150,150);
margin-top: 10px;
margin-left: 10px;
}
.img_id{
color:rgba(100,100,100);
}
.img_title{
color: white;
}
.img_title:hover{
cursor: pointer;
color:rgba(50,50,50);
}
.popup{
position: absolute;
height: 230px;
width: 350px;
top: 10px;
left: 170px;
background-color:rgba(50,50,50);
display: none;
}
.popup.visible{
display: block;
}
.img_descr{
color: white;
}
<!DOCTYPE html>
<html>
<head>
<title>XY</title>
<meta charset="UTF-8"/>
</head>
<body>
<div id="frame">
<div class="frame__wrapper">
<div class='click_box' onclick='openPopup(this)'>
<a class='img_id'>ID: 1</a><br>
<div class='img_title'><a>Title: <b>Title 1</b></a></div>
</div>
<div class='popup'>
<div class='img_descr'><a>Descr: <b>Desc 1</b></a></div>
</div>
</div>
<div class="frame__wrapper">
<div class='click_box' onclick='openPopup(this)'>
<a class='img_id'>ID: 2</a><br>
<div class='img_title'><a>Title: <b>Title 2</b></a></div>
</div>
<div class='popup'>
<div class='img_descr'><a>Descr: <b>Desc 2</b></a></div>
</div>
</div>
<div class="frame__wrapper">
<div class='click_box' onclick='openPopup(this)'>
<a class='img_id'>ID: 3</a><br>
<div class='img_title'><a>Title: <b>Title 3</b></a></div>
</div>
<div class='popup'>
<div class='img_descr'><a>Descr: <b>Desc 3</b></a></div>
</div>
</div>
<div class="frame__wrapper">
<div class='click_box' onclick='openPopup(this)'>
<a class='img_id'>ID: 4</a><br>
<div class='img_title'><a>Title: <b>Title 4</b></a></div>
</div>
<div class='popup'>
<div class='img_descr'><a>Descr: <b>Desc 4</b></a></div>
</div>
</div>
</div>
</body>
</html>
A solution suggested by #musicnothing in an older thread displays a content div below the row of inline divs, this works good when the div.wrapblock is clicked itself.
http://jsfiddle.net/SYJaj/7/
function placeAfter($block) {
$block.after($('#content'));
}
$('.wrapblock').click(function() {
$('#content').css('display','inline-block');
var top = $(this).offset().top;
var $blocks = $(this).nextAll('.wrapblock');
if ($blocks.length == 0) {
placeAfter($(this));
return false;
}
$blocks.each(function(i, j) {
if($(this).offset().top != top) {
placeAfter($(this).prev('.wrapblock'));
return false;
} else if ((i + 1) == $blocks.length) {
placeAfter($(this));
return false;
}
});
});
The issue I'm having.
I need to trigger the same effect, but by adding the click event to a link within the wrapblock itself.
My code is nearly identical.
What I have changed is the click event handle, from $('.wrapblock').click(function() to $('.more').on('click', function() I also needed to add .closest(".wrapblock") for the content div to position itself outside of the wrapblock.
$('.more').on('click', function() {
...
if ($blocks.length == 0) {
placeAfter($(this).closest(".wrapblock"));
return false;
}
Everything can be seen and tested http://jsfiddle.net/7Lt1hnaL/
Would be great if somebody could shed some light on how I can calculate which block it needs to follow with the offset method, thanks in advance.
As you can see in the latest fiddle example, the content div is not displaying below the row of divs.
I also apologise, I wanted to post on the thread in discussion but I only have a minor posting reputation which doesn't let me, thanks.
var $chosen = null;
var $allBlocks = [];
$(function(){
$allBlocks = $('.wrapblock');
})
$(window).on('resize', function() {
if ($chosen != null) {
$('#content').css('display','none');
$('body').append($('#content'));
$chosen.trigger('click');
}
});
$('.more').on('click', function() {
$chosen = $(this);
var position = $chosen.parent('.wrapblock').position();
$('#content').css('display','inline-block');
$allBlocks.filter(function(idx, ele){
return $(ele).position().top == position.top;
})
.last()
.after($('#content'));
});
.wrapblock
{
background: #963a3a;
display: inline-block;
width: 90px;
height: 90px;
color: white;
font-size: 14px;
text-align: left;
padding: 10px;
margin: 10px;
vertical-align:top;
position:relative;
}
#content
{
display:none;
vertical-align:top;
width:100%;
background: #5582c1;
font-size: 12px;
color: white;
padding: 10px;
}
.more {
position:absolute;
bottom:15px;
right:15px;
cursor:pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<div class="wrapblock">1
<span class="more" data-ref="1">more</span>
</div>
<div class="wrapblock">2
<span class="more" data-ref="2">more</span>
</div>
<div class="wrapblock">3
<span class="more" data-ref="3">more</span>
</div>
<div class="wrapblock">4
<span class="more" data-ref="4">more</span>
</div>
<div class="wrapblock">5
<span class="more" data-ref="5">more</span>
</div>
<div class="wrapblock">6
<span class="more" data-ref="6">more</span>
</div>
<div class="wrapblock">7
<span class="more" data-ref="7">more</span>
</div>
<div class="wrapblock">8
<span class="more" data-ref="8">more</span>
</div>
<div class="wrapblock">9
<span class="more" data-ref="9">more</span>
</div>
<div id="content">Some Content</div>
Seems to do what you want. Basically, it just filters down the set of all blocks to the row of the block you clicked on using the assumption that they'll all have the same vertical offset (top), then takes the last one, because jQuery will keep them in document order, so that'll be the last one in the layout row.
Oh, and I updated the fiddle http://jsfiddle.net/7Lt1hnaL/1/
I'm using fancybox (2.15) and elevatezoom (3.0.8) that come with Magento 1.9.2.4, to zoom the main image and create a fancybox gallery with the other images of the gallery. Fancybox is opened when clicking on the main image.
What i need, is to use the thumbnail helper to navigate the thumbnails while the fancybox is open, but the problem is that I'm not able to initialize it in the easiest and suggested way, like
$(selector).fancybox({config});
and the way i'm using has no effect on the fancybox appearance.
This is the code i'm using
js
$(document).ready(function() {
if($('.thumb-link').size() == 0){
var ez = $('.gallery-image.visible').first().data('zoom-image');
}else{
var ez = $(".thumb-link");
}
$.fancybox({
'width':400,
'height': 500,
helpers : {
title : {
type: 'outside'
},
thumbs : {
width : 50,
height : 50
}
}
});
$(".gallery-image.visible").bind("click", function(e) {
$.fancybox(ez);
return false;
});
});
where .gallery-image.visible is the main image and the .thumb-link are the thumbnails in my Html.
Following other questions like this one using fancybox set height and width
but I actually get not visible effect on the fancybox.
Is there a different way to re-initialize fancybox configurations before calling it effectively?
EDIT:
Actually I changed my code in this way:
var fancyConfig = {'width' : 200, 'height': 300,...};
$(".gallery-image.visible").bind("click", function(e) {
$.fancybox(ez, fancyConfig);
return false;
});
and I can see some effects but no trace of thumbs....I included and can see the proper libraries for fancybox thumbnails helper.
I think that this piece of code does not do anything, I do not see any selector or collection of objects here:
$.fancybox({
'width':400,
'height': 500,
helpers : {
title : {
type: 'outside'
},
thumbs : {
width : 50,
height : 50
}
}
});
I think you should replace $.fancybox(ez); with $.fancybox.open(ez, {config});
Actually I found out that using the libraries used in the fiddle and not the ones I was loading in my server, makes the scripts compatible and it works.
So in this way it works:
var fancyConfig = {
helpers : {
thumbs : {
width : 50,
height : 50
}
}
};
$(".gallery-image").click(function(e) {
$.fancybox(ez, fancyConfig);
return false;
});
and the fiddle
$(document).ready(function() {
if($('.thumb-link').size() == 0){
var ez = $('.gallery-image.visible').first().data('zoom-image');
}else{
var ez = $(".thumb-link");
}
var fancyConfig = {
'speedIn' : 1000,
'speedOut' : 1000,
helpers : {
title : {
type: 'outside'
},
thumbs : {
width : 50,
height : 50
}
}
};
$(".gallery-image.visible").bind("click", function(e) {
$.fancybox(ez, fancyConfig);
return false;
});
});
ul {
list-style: none;
margin: 0;
padding: 0;
}
.product-image-thumbs li:first-child {
margin-left: -1px;
}
.product-image-thumbs li{
display: inline-block;
margin-right: 2%;
}
.product-image-thumbs a {
display: inline-block;
border: 1px solid #cccccc;
overflow: hidden;
}
.product-image-thumbs a img{
width: 122px;
height: 122px;
overflow: hidden;
}
.product-image-gallery .gallery-image {
display: none;
}
.product-image-gallery .gallery-image.visible {
display: block;
}
.product-img-box .product-image img {
max-width: 100%;
max-height: 750px;
width: 500px;
max-width: 500px;
margin: 0px auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/helpers/jquery.fancybox-thumbs.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/helpers/jquery.fancybox-thumbs.css" rel="stylesheet"/>
<div class="product-img-box">
<div class="product-image product-image-zoom zoom-available">
<div class="product-image-gallery">
<img id="image-main"
class="gallery-image visible"
src="https://static.pexels.com/photos/111755/pexels-photo-111755.jpeg"
alt="custom-alt"
title="img-title"
data-zoom-image="https://static.pexels.com/photos/111755/pexels-photo-111755.jpeg" />
<img id="image-main"
class="gallery-image"
src="https://static.pexels.com/photos/111755/pexels-photo-111755.jpeg" />
<img id="image-0"
class="gallery-image"
src="https://static.pexels.com/photos/67832/sunrise-sky-blue-sunlight-67832.jpeg" />
<img id="image-1"
class="gallery-image"
src="https://media.istockphoto.com/photos/majestic-sunrise-over-the-mountains-picture-id185067762?k=6&m=185067762&s=612x612&w=0&h=QFGIsuncZGtiLeCQk6aMR14nOUrJNsFmXgpbT7oEU0c=" />
<img id="image-2"
class="gallery-image" src="https://static.pexels.com/photos/111755/pexels-photo-111755.jpeg" />
</div>
</div>
</div>
<div class="more-views">
<ul class="product-image-thumbs">
<li>
<a class="thumb-link" title="my-title" rel="fancybox-thumb" data-image-index="2" href="https://static.pexels.com/photos/111755/pexels-photo-111755.jpeg">
<img src="https://static.pexels.com/photos/111755/pexels-photo-111755.jpeg" alt="custom-alt" />
</a>
<a class="thumb-link" title="my-title" rel="fancybox-thumb" data-image-index="0" href="https://static.pexels.com/photos/67832/sunrise-sky-blue-sunlight-67832.jpeg">
<img src="https://static.pexels.com/photos/67832/sunrise-sky-blue-sunlight-67832.jpeg" alt="custom-alt" />
</a>
<a class="thumb-link" title="my-title" rel="fancybox-thumb" data-image-index="1" href="https://media.istockphoto.com/photos/majestic-sunrise-over-the-mountains-picture-id185067762?k=6&m=185067762&s=612x612&w=0&h=QFGIsuncZGtiLeCQk6aMR14nOUrJNsFmXgpbT7oEU0c=g">
<img src="https://media.istockphoto.com/photos/majestic-sunrise-over-the-mountains-picture-id185067762?k=6&m=185067762&s=612x612&w=0&h=QFGIsuncZGtiLeCQk6aMR14nOUrJNsFmXgpbT7oEU0c=" alt="custom-alt" />
</a>
</li>
</ul>
</div>
I would like to show img on mouseover event over a thumbnail with help of data-attr but only the first thumbnail is working.
DEMO http://jsfiddle.net/3gn0kj1k/
I have tried a lots of things but without the success therefore I am here.
JS code :
enter code here
var animIcon = $(".graph-icons img");
var dataAnim = $(".graph-anim .animation").data("anim");
animIcon.mouseenter(function () {
$(".graph-main-img").css({
"opacity": "0"
});
if ($(this).data("img") === dataAnim) {
console.log(dataAnim);
$('.graph-anim .animation[data-anim=' + dataAnim + ']').css({
"opacity": "1"
});
}
});
animIcon.mouseleave(function () {
$(".graph-main-img").css({
"opacity": "1"
});
$(".animation").css({
"opacity": "0"
});
});
From the .data documentation (with my own emphasis):
return the value at the named data store for the first element in the
set of matched elements.
A way to fix it would be to simply use $(this).data("img") (which you're already checking against):
var dataAnim = $(this).data("img")
$('.graph-anim .animation[data-anim=' + dataAnim + ']').css({
"opacity": "1"
});
Updated Fiddle
you can just get the attribute and display according to this . Try following code.here is updated fiddle fiddle
var attr=$(this).attr('data-img');
$('.animation[data-anim=' + attr + ']').css({
"opacity": "1"
});
var animIcon = $(".graph-icons img");
animIcon.mouseenter(function () {
$(".graph-main-img").css({
"opacity": "0"
});
var attr=$(this).attr('data-img');
$('.animation[data-anim=' + attr + ']').css({
"opacity": "1"
});
});
animIcon.mouseleave(function () {
$(".graph-main-img").css({
"opacity": "1"
});
$(".animation").css({
"opacity": "0"
});
});
li {
list-style: none;
}
.graph-icons img {
width: 70px;
display: inline-block;
float: left;
padding-right: 30px;
margin-bottom: 50px;
cursor: pointer;
}
.graph-icons:after {
clear: both;
content:"";
display: block;
}
.graph-main {
position: relative;
}
.graph-anim .animation {
position: absolute;
top: 0;
opacity: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- ICONS -->
<div class="graph-icons">
<li>
<img src="https://upload.wikimedia.org/wikipedia/en/6/6f/KennyMcCormick.png" data-img="kenny">
</li>
<li>
<img src="http://static.giantbomb.com/uploads/scale_small/0/4810/1202378-stan1.jpg" data-img="stan">
</li>
<li>
<img src="https://em.wattpad.com/0bf45eee023c7403ca0cb15d127e6c8852a57d28/687474703a2f2f736f7574687061726b73747564696f732e6d74766e696d616765732e636f6d2f7368617265642f636861726163746572732f6b6964732f6b796c652d62726f666c6f76736b692e6a7067" data-img="kyle">
</li>
</div>
<!-- anim -->
<div class="graph-main">
<div class="graph-main-img">
<img src="http://2.images.southparkstudios.com/default/image.jpg?quality=0.8" alt="">
</div>
<div class="graph-anim">
<div class="animation" data-anim="kenny">
<img src="https://upload.wikimedia.org/wikipedia/en/6/6f/KennyMcCormick.png">
</div>
<div class="animation" data-anim="stan">
<img src="http://static.giantbomb.com/uploads/scale_small/0/4810/1202378-stan1.jpg">
</div>
<div class="animation" data-anim="kyle">
<img src="https://em.wattpad.com/0bf45eee023c7403ca0cb15d127e6c8852a57d28/687474703a2f2f736f7574687061726b73747564696f732e6d74766e696d616765732e636f6d2f7368617265642f636861726163746572732f6b6964732f6b796c652d62726f666c6f76736b692e6a7067">
</div>
</div>
</div>
Not sure if this approach would be ok for you, but I simplified your script to look like this:
var animIcon = $(".graph-icons img");
animIcon.mouseenter(function () {
$(".graph-main-img").css({
"opacity": "0"
});
var character = $(this).data("img");
$('.graph-anim .animation[data-anim=' + character + ']').css({
"opacity": "1"
});
});
animIcon.mouseleave(function () {
$(".graph-main-img").css({
"opacity": "1"
});
$(".animation").css({
"opacity": "0"
});
});
I have the following code which add and remove a class. But I want to add another class over the image when is active and remove it when is inactive. The problem is that I could added but is going to be active for all elements not only for the one is opened. Does anyone has an idea how to fix this?
https://jsfiddle.net/bmhv3edw/3/
$(document).ready(function() {
function close_answer_section() {
$('.question-text').removeClass('active');
$('.plus').attr("src","http://tdhtestserver.herobo.com/plus-eclipse.png");
$('.answer-section-content').slideUp(300).removeClass('open');
}
$('.question-text').click(function(e) {
var currentAttrValue = $(this).attr('href');
if($(this).is('.active')) {
close_answer_section();
}else {
close_answer_section();
$(".plus").attr("src","http://tdhtestserver.herobo.com/plus-eclipse-active.png");
$(this).addClass('active');
$('.questions ' + currentAttrValue).slideDown(300).addClass('open');
}
e.preventDefault();
});
});
UPDATED:
$(document).ready(function() {
function close_answer_section() {
$('.question-text').removeClass('active');
$('.plus').attr("src","http://tdhtestserver.herobo.com/plus-eclipse.png");
$('.answer-section-content').slideUp(300).removeClass('open');
}
$('.question-text').click(function(e) {
var currentAttrValue = $(this).attr('href');
if($(this).is('.active')) {
close_answer_section();
}else {
close_answer_section();
$(this).find('img').attr("src","http://tdhtestserver.herobo.com/plus-eclipse-active.png");
$(this).addClass("active");
$('.questions ' + currentAttrValue).slideDown(300).addClass('open');
}
e.preventDefault();
});
});
/* body{ background: black }; */
.questions{
padding-top: 25px;
padding-left: 170px;
padding-bottom: 25px;
}
.question{
padding: 5px;
font-size: 18px;
font-weight: 100;
}
.answer-section-content {
display:none;
padding: 2px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="questions">
<div class="question">
<div class="question-text" href="#answer-52"><img class="plus" src="http://tdhtestserver.herobo.com/plus-eclipse.png"/> Question 1</div>
<div id="answer-52" class="answer-section-content">
<p>Answer 1</p>
</div>
</div>
<div class="question">
<div class="question-text" href="#answer-53"><img class="plus" src="http://tdhtestserver.herobo.com/plus-eclipse.png"/> Question 2</div>
<div id="answer-53" class="answer-section-content">
<p>Answer 1</p>
</div>
</div>
</div>