We Keep Coding

Why do the images not change to previous ones on hover?

The mouse hover is showing the <div>s normally but after the first time I move the mouse it no longer shows the other <div>s. It eventually stays on the last image and doesn’t change to another.
I tried with fadeToggle but I would like it to be fixed to the last image that appeared, but fadeToggle hides the last image when you mouse out.
$('.second').hover(function() {
$('.showsecond').fadeIn();
});
$('.third').hover(function() {
$('.showthird').fadeIn();
});
$('.fourth').hover(function() {
$('.showfourth').fadeIn();
});
$('.fifth').hover(function() {
$('.showfifth').fadeIn();
});
.menuimage {
display: none;
position: absolute;
}
.menuimagefirst {
display: block !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-6">
<ul>
<li class="first">first</li>
<li class="second">second</li>
<li class="third">third</li>
<li class="fourth">fourth</li>
<li class="fifth">fifth</li>
</ul>
</div>
<div class="col-6">
<div class="menuimage menuimagefirst showfirst">
<img src="https://i.imgur.com/o87PUwV.jpg" />
</div>
<div class="menuimage showsecond">
<img src="https://i.imgur.com/ICs7TVH.jpg" />
</div>
<div class="menuimage showthird">
<img src="https://i.imgur.com/n9gdy8N.jpg" />
</div>
<div class="menuimage showfourth">
<img src="https://i.imgur.com/o87PUwV.jpg" />
</div>
<div class="menuimage showfifth">
<img src="https://i.imgur.com/ICs7TVH.jpg" />
</div>
</div>
https://jsfiddle.net/castordida/fwou1hvg/17/
I expected it to always show the last image and keep that image until I hover on another link.
UPDATE 29/08/19:
Sorry i did not mention that what i am using is in the wordpress menu, so i made use of classes and not data-toggle unfortunately. I tried to add data-toggle unsuccessfully to wordpress menu.

A bit a dirty work, but should work ;)
P.S : You can ignore .menu-item css as its just for aesthetics. Though rest of the css are important.
$('.menu-item').mouseenter(function()
{
var $this = $(this);
var hover_elem_classes = $this.attr("class");
var class_list;
class_list = hover_elem_classes.split(" ");
var currentImageClass="";
for(var i in class_list)
{
var styleClass = class_list[i];
if(styleClass.startsWith("show"))
{
currentImageClass = styleClass;
break;
}
}
var $activeImg = $(".menuimage."+currentImageClass);
if(!$activeImg.hasClass("active"))
{
$(".menuimage.active").stop().fadeOut().removeClass("active");
$activeImg.addClass("active").fadeIn();
}
});
.menuimage{display:none;position:absolute;}
.menu-item{padding:5px 10px;list-style-type:none;display:inline;text-transform:uppercase;}
.menuimage.active{z-index:10;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-6">
<ul>
<li class="menu-item showfirst adasd adasd">first</li>
<li class="menu-item showsecond zxczxc xczxczc">second</li>
<li class="menu-item showthird fghfgh ghfgh">third</li>
<li class="menu-item showfourth adasdg gfhfgh">fourth</li>
<li class="menu-item showfifth zxczxc czxc">fifth</li>
</ul>
</div>
<div class="col-6">
<div class="menuimage active showfirst" style="display:block;">
<img src="https://i.imgur.com/o87PUwV.jpg" />
</div>
<div class="menuimage showsecond">
<img src="https://i.imgur.com/ICs7TVH.jpg" />
</div>
<div class="menuimage showthird">
<img src="https://i.imgur.com/n9gdy8N.jpg" />
</div>
<div class="menuimage showfourth">
<img src="https://i.imgur.com/o87PUwV.jpg" />
</div>
<div class="menuimage showfifth">
<img src="https://i.imgur.com/ICs7TVH.jpg" />
</div>
</div>

Problem is you do not hide elements after they are shown so when you have an element on top of another element it will not be visible. So you need to hide them.
$("li[data-toggles]").on("mouseenter", function () {
$(".menuimage.active").stop().hide();
$($(this).data('toggles')).stop().fadeIn().addClass('active');
})
.menuimage {
display: none;
position: absolute;
}
.menuimagefirst {
display: block !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-6">
<ul>
<li class="first" data-toggles=".showfirst">first</li>
<li class="second" data-toggles=".showsecond">second</li>
<li class="third" data-toggles=".showthird">third</li>
<li class="fourth" data-toggles=".showfourth">fourth</li>
<li class="fifth" data-toggles=".showfifth">fifth</li>
</ul>
</div>
<div class="col-6">
<div class="menuimage menuimagefirst showfirst">
<img src="https://i.imgur.com/o87PUwV.jpg" />
</div>
<div class="menuimage showsecond">
<img src="https://i.imgur.com/ICs7TVH.jpg" />
</div>
<div class="menuimage showthird">
<img src="https://i.imgur.com/n9gdy8N.jpg" />
</div>
<div class="menuimage showfourth">
<img src="https://i.imgur.com/o87PUwV.jpg" />
</div>
<div class="menuimage showfifth">
<img src="https://i.imgur.com/ICs7TVH.jpg" />
</div>
</div>

You've got a lot of unnecessary code here and it's contributing to your issues.
There is no need to create an img element for each picture you wish to show. Since you only want to show one image at a time, one img element is all you need. You'll just programatically change its source as needed. The image paths themselves will be kept in an array and a counter will be used to keep track of which index from the array to use as the source for the image element.
By eliminating the multiple img elements, you can eliminate the CSS that positions them, which is the source of the issue you are currently facing (layering of images).
Also, don't use a elements unless you are navigating somewhere when they are clicked as a elements are exclusively for navigation. Instead, you can set up your event on the li element that the user will be mousing over.
let imgs = [
"https://i.imgur.com/o87PUwV.jpg",
"https://i.imgur.com/ICs7TVH.jpg",
"https://i.imgur.com/n9gdy8N.jpg",
"https://i.imgur.com/o87PUwV.jpg",
"https://i.imgur.com/ICs7TVH.jpg"
];
let idx = 0;
$('.imgNav').on("mouseover", function() {
$(".menuimage").fadeOut(function(){
// As long as the index is less than the highest one in the array...
if(idx < (imgs.length - 1)){
// Set the source of the image element to the next path in the array
$(".menuimage")[0].src = imgs[++idx];
} else {
// Otherwise, reset the index
idx = 0;
}
// Show the image element now that its source has been changed.
$(".menuimage").fadeIn();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-6">
<ul>
<li class="imgNav">first</li>
<li class="imgNav">second</li>
<li class="imgNav">third</li>
<li class="imgNav">fourth</li>
<li class="imgNav">fifth</li>
</ul>
</div>
<div class="col-6">
<img class="menuimage" src="https://i.imgur.com/o87PUwV.jpg">
</div>

Traverse DOM tree and check if any parent has class

I have an HTML DOM object and I select all elements with the attribute: data-reveal.
var revealList = doc.querySelectorAll('[data-reveal]');
I would like to iterate through these elements and check, if there is a parent element that has the class note. Only if the class is not present I want to do something.
I have used the closest method, suggested in other posts, but the code does not return anything.
for (var i = 0; i < revealList.length; i++) {
if (revealList[i].closest('[data-conceal]').length = 0) {
// do something
}
};
This is a minimal HTML example.
<div class="parent">
<div class="note">
<img data-reveal="2" href="">
<img data-reveal="3" href="">
<img data-reveal="4" href="">
</div>
<img data-reveal="5" href="">
<img data-reveal="6" href="">
</div>
Is maybe the error in how I select the object in the if clause?

In your code code you should look for the closest .note. So instead of this:
revealList[i].closest('[data-conceal]')
Do this:
revealList[i].closest('.note')
Unlike jQuery .closest(), the native closest returns null when it doesn't find anything, and trying to find the length of null throws an error. Check for null before trying to use the result.
A working example:
var revealList = document.querySelectorAll('[data-reveal]');
var note;
for (var i = 0; i < revealList.length; i++) {
note = revealList[i].closest('.note'); // find the closest
if (note !== null) { // if it's not null do something
alert('note');
}
};
<div class="parent">
<div class="note">
<img data-reveal="2" href="">
<img data-reveal="3" href="">
<img data-reveal="4" href="">
</div>
<img data-reveal="5" href="">
<img data-reveal="6" href="">
</div>

Since you have jquery as a tag, it's fair game, :D I'd probably do something like this.
$('img').filter('[data-reveal]').each(function() {
var $this = $(this);
if ($this.closest('[data-conceal]').length < 1) {
console.log(this);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent">
<div class="note">
<img data-reveal="2" href="">
<img data-reveal="3" href="">
<img data-reveal="4" href="">
</div>
<div data-conceal="do it">
<img data-reveal="5" href="">
<img data-reveal="6" href="">
</div>
</div>

How to get images alt using jquery?

I'm trying to add data-title and data-lightbox and get Images alt inside.
the problem is, i have a similar outputs, from first image alt only!
How can we fix it?
jQuery(document).ready(function($) {
var imagesalt = $('.box a img').attr('alt');
$(".box a").attr("data-title", imagesalt);
$(".box a").attr("data-lightbox", imagesalt);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box">
<a href="#">
<img src="img1.jpg" alt="Text 1">
</a>
<div class="img-block"></div>
</div>
<div class="box">
<a href="#">
<img src="img1.jpg" alt="Text 2">
</a>
<div class="img-block"></div>
</div>
<div class="box">
<a data-lightbox="text 1" data-title="text 1" href="#">
<img src="img1.jpg" alt="Text 1">
</a>
<div class="img-block"></div>
</div>
<div class="box">
<a data-lightbox="text 1" data-lightbox="text 1" href="#">
<img src="img1.jpg" alt="Text 2">
</a>
<div class="img-block"></div>
</div>
I tried writing the code more than one way, but not useful
Thanks

Your query is ambiguous, that's why!
When you request the "alt" attribute with $(".box a img").attr("alt"), you're taking in many objects, sure, but attr() is returning only the first result.
In pure jQuery, you'd do it with .each():
$(".box a img").each(function(){
var imageAlt = $(this).attr("alt");
var parent = $(this).parent();
parent.attr("data-lightbox", imageAlt);
parent.attr("data-title", imageAlt);
});
That should give you the behaviour you expect.

Iterate over each of the divs with the class of 'box' - then find the image within it, get the alt text of that and apply it as the data attribute of the div. Note I put in a console.log to demonstrate the alt text is being found correctly. Ypu can use the console inspector to see that the data attribute is being applied to the divs correctly.
$(document).ready(function(){
$(".box").each(function(){
var imageAlt = $(this).find('img').attr('alt');
$(this).attr("data-title", imageAlt);
console.log(imageAlt);
})
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box">
<a href="#">
<img src="img1.jpg" alt="Text 1">
</a>
<div class="img-block"></div>
</div>
<div class="box">
<a href="#">
<img src="img1.jpg" alt="Text 2">
</a>
<div class="img-block"></div>
</div>

Try this:
$('.box a img').each(function(){
$(this).parent().find("a").attr("data-title", $(this).attr("alt");
$(this).parent().find("a").attr("data-lightbox", $(this).attr("alt");
})

The .attr() method gets the attribute value for only the first element in the matched set.
But, the .attr() method sets the attribute value for every element in the matched set.
enter link description here

Js: getElementById

I have a list of image like this:
<div id="imgSorce">
<img src="images/img1.png"/>
<img src='images/img2.png'/>
</div>
<div id="imgResult"></div>
I want to be able to insert the images to a div tag when I click on any of them.
function myFunction() {
document.getElementById("imgResult").innerHTML = "<img src='images/aftersurprise.png' />";
}
Thanks

You can do it with jQuery:
jQuery('a').on('click', function(){
var pic = jQuery(this).html();
jQuery('#imgResult').html(pic);
});
https://jsfiddle.net/1o4ngjnc/

Try like this by using onClick.
function myFunction() {
document.getElementById("imgResult").innerHTML = "<img src='images/aftersurprise.png' />";
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div id="imgSorce">
<img src="images/img1.png"/>
<img src='images/img2.png'/>
</div>
<div id="imgResult"></div>

function myFunction(elment) {
// Copy the <li> element and its child nodes
var cln = elment.firstChild.cloneNode(true);
// Append the cloned <li> element to <ul> with id="myList1"
document.getElementById("imgResult").appendChild(cln);
}
<div id="imgSorce">
<img width='100px' height='100px' src="http://www.hdwallpapersimages.com/wp-content/uploads/2014/01/Winter-Tiger-Wild-Cat-Images.jpg"/>
<img width='100px' height='100px' src='http://www.hdwallpapersimages.com/wp-content/uploads/2014/01/Winter-Tiger-Wild-Cat-Images.jpg'/>
</div>
<div id="imgResult"></div>

As you tag with jquery, you can do like below:
Find the <img> inside the clicked <a>. It's $(this).children('img')
Clone it. It's .clone()
Before move the picture to #imgResult, clear anything inside it.
$('#imgResult').empty()
Edited: If image needs to stay, don't do the step 3, which means replace
$('#imageResult').empty() to simple $('#imageResult')
Put the cloned image to #imageResult. It's .appendTo($('#imgResult'))
$('a').click(function() {
$(this).children('img').clone().appendTo($('#imgResult'));
});
img {
max-width: 300px;
height: auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="imgSorce">
<img src="https://i.imgur.com/cWCw1q2.jpg"/>
<img src='https://i.imgur.com/4EiQldb.jpg'/>
</div>
<div id="imgResult"></div>

Here is the code in pure Javascript:
function myFunction(clicked_id) {
document.getElementById("imgResult").innerHTML = "<img src='" + document.getElementById(clicked_id).getAttribute("src") + "'/>"
}
<div id="imgSorce">
<a href="#" ><img onclick="myFunction(this.id)" id="img1" src="http://placekitten.com.s3.amazonaws.com/homepage-samples/96/140.jpg"/></a>
<a href="#" ><img onclick="myFunction(this.id)" id="img2" src="http://placekitten.com.s3.amazonaws.com/homepage-samples/96/139.jpg"/></a>
</div>
<div id="imgResult"></div>

You may simply replace the innerHTML:
function myFunction(el) {
document.getElementById("imgResult").innerHTML = el.innerHTML;
//in case you want to keep appending images insted of replacing the old one, use `+=`
//document.getElementById("imgResult").innerHTML += el.innerHTML
}
<div id="imgSorce">
<a onclick="myFunction(this);" href="#">
<img src="images/img1.png" />
</a>
<a onclick="myFunction(this);" href="#">
<img src='images/img2.png' />
</a>
</div>
<div id="imgResult"></div>

jquery - can't get the elements to fadeOut / fadeIn

I've wrote this code in order to replace the text regarding the img they are clicking.
I can't understand why my code isn't executing, I looked it over and over again.
I hope someone can find my mistake :(
This is the jQuery code:
$(document).ready(function() {
$('#text-1').fadeIn(500);
//click event
$('.img').click(function() {
var currentId = $(this).attr('id');
alert(currentId);
if (currentId===3) {
$('#text-3').fadeIn('fast');
$('#text-2, #text-1').css('display', 'none');
} else if (currentId===2) {
$('#text-2').fadeIn('fast');
$('#text-1, #text-3').css('display', 'none');
} else if (currentId===1) {
$('#text-2').fadeIn('fast');
$('#text-1, #text-3').css('display', 'none');
}
});
});
and this is the HTML:
<div>
<div id="icon">
<a id="1" class="img" href=""><img style="background: url(http://images.webydo.com/10/100459/169860/hutim.jpg) 0 0;" src="" /></a>
<a id="2" class="img" href=""><img style="background: url(http://images.webydo.com/10/100459/Folder%201/work_electric_main_banner.png) -20px -10px;" src="" /></a>
<a id="3" class="img" href=""><img src="http://hviil.co.il/wp-content/uploads/2013/02/DS-2CD7254F-EIZ-310x310.jpg" alt="מצלמות אבטחה" /></a>
</div>
<div id="text">
<div id="text-1" class="textbox">
<h2>1</h2>
<p>adssssssssssssssssssssssasdsaaaaaaaaaaaaaaaaaaaa</p>
<div id="text-2" class="textbox">
<h2>2</h2>
<p>adssssssssssssssssssssssasdsaaaaaaaaaaaaaaaaaaaa</p>
</div>
<div id="text-3" class="textbox">
<h2>3</h2>
<p>adssssssssssssssssssssssasdsaaaaaaaaaaaaaaaaaaaa</p>
</div>
</div>
</div>
Please help!!!!
Thanks

Problem is in your condition checking
instead of using such that
currentId===3 // checks that currentId is numeric 3
Use
currentId=='3' //changed === to ==, check that currentId is string type 3
And one more thing, after clicking a your page is redirecting, so if you want to prevent this, use preventDeault or put # in your href.

HTML
<div>
<div id="icon">
<a id="1" class="img" href=""><img style="background: url(http://images.webydo.com/10/100459/169860/hutim.jpg) 0 0;" src="" /></a>
<a id="2" class="img" href=""><img style="background: url(http://images.webydo.com/10/100459/Folder%201/work_electric_main_banner.png) -20px -10px;" src="" /></a>
<a id="3" class="img" href=""><img src="http://hviil.co.il/wp-content/uploads/2013/02/DS-2CD7254F-EIZ-310x310.jpg" alt="מצלמות אבטחה" /></a>
</div>
<div id="text">
<div id="text-1" class="textbox">
<h2>1</h2>
<p>adssssssssssssssssssssssasdsaaaaaaaaaaaaaaaaaaaa</p>
<div id="text-2" class="textbox">
<h2>2</h2>
<p>adssssssssssssssssssssssasdsaaaaaaaaaaaaaaaaaaaa</p>
</div>
<div id="text-3" class="textbox">
<h2>3</h2>
<p>adssssssssssssssssssssssasdsaaaaaaaaaaaaaaaaaaaa</p>
</div>
</div>
</div>
JS
$(document).ready(function() {
$('#text-1').fadeIn(500);
//click event
$('.img').click(function() {
var currentId = $(this).attr('id');
alert(currentId);
if (currentId==3) {
$('#text-3').fadeIn('fast');
$('#text-2, #text-1').css('display', 'none');
} else if (currentId==2) {
$('#text-2').fadeIn('fast');
$('#text-1, #text-3').css('display', 'none');
} else if (currentId==1) {
$('#text-2').fadeIn('fast');
$('#text-1, #text-3').css('display', 'none');
}
});
});
WORKING LINK
http://jsbin.com/heseforaxe/1/edit?html,js,output

var currentId = $(this).attr('id');
All the value of attributes is string ,not number.
so,you can change like this.
currentId==="3";
or
currentId==3;

currentId===3 this should be changed to currentId==3 because the returned id is string
because there is a post back when clicking the link you need to add ref="#" to the a tag
there are missing closing tags on div id='text-1' and the main div
you can find a working copy of this from this url "http://jsfiddle.net/t3L1fkuh/6/" (i have removed the images because 2 of them does not load).
.textbox{
display: none;
}
the above class is added so that it adds the fade in effect on page load