We Keep Coding

Loop thru each anchor and onclick display an image in modal box using jQuery

I have dynamically generated div's whose content contains an anchor link and path to an image.
I also have a modal box with an image tag in.
What I am trying to do is onclick of the anchor link, set the image tag path which is in the modal box.
Currently what my code does is no matter what anchor link I click, its always setting image path to the first path link.
Here is my JSFiddle link
JSFiddle
My Code:
<div id="coupon-listing-items" class="shopping-listings listings">
<div class="left-split">
<a class="ads-links" title="Test Title One" href="http://www.test.com/"><h2>Test Title One</h2></a><div class="coupon-text">(Get 20% of by staying 2 nights)</div>
<span id="sLink" class="hide">http://via.placeholder.com/350x250</span>
</div>
<div class="left-split">
<a class="ads-links" title="Test Title Two" href="http://www.test.com/"><h2>Test Title Two</h2></a><div class="coupon-text"></div>
<span id="sLink" class="hide">http://via.placeholder.com/400x350</span>
</div>
</div>
<!-- Modal Box -->
<div class="modal CouponModal">
<span class="close-modal">×</span>
<div class="modal-content">
<input type="button" class="btnprint" name="btnprint" value="Print This Coupon" onclick="PrintC('cp-image')"/>
<div id="cp-image">
<img id="coupon-image" />
<div id="caption">
<span class="vist">Visit the website: <a id="c-weblink"></a></span>
</div>
</div>
</div>
</div>
$(".ads-links").each(function(index){
$(".ads-links").on("click", function(e){
e.preventDefault(); var imgsrc = document.getElementById('sLink')
$(".CouponModal").css('display', 'block');
$("#coupon-image").attr('src',imgsrc.innerHTML);
});
$(".close-modal").click(function(e) {
$(".CouponModal").css('display', 'none');
});
});
If you click on Test title one, you will image name 350x250 displayed in the modal box, and if you close the modal box and now click on test title two, instead displaying the image 450x350 just displays the first image.
What am I missing?
Thanks and appreciate it

You are selecting the first sLink no matter which is anchor is clicked.
var imgsrc = document.getElementById('sLink');
Instead you need to base this on the sLink closest to the anchor clicked.
var imgsrc = $(this).parent().find('#sLink')[0];
//This goes up a level and finds the sLink that is in that same parent//
Note
that an ID should be unique and is likely causing part of your confusion, in this case a class might be just as useful.
your outer loop is superfluous and might cause you trouble down the road.
Updated Your Fiddle: https://jsfiddle.net/0dmc9rvt/25/

$(".ads-links").each(function(index) {
$(this).on("click", function(e) {
e.preventDefault();
debugger;
$(".CouponModal").css('display', 'block');
$("#coupon-image").attr('src', $(this).parent().find('.sLink').html());
});
$(".close-modal").click(function(e) {
$(".CouponModal").css('display', 'none');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="coupon-listing-items" class="shopping-listings listings">
<div class="left-split">
<a class="ads-links" title="Test Title One" href="http://www.test.com/">
<h2>Test Title One</h2>
</a>
<div class="coupon-text">(Get 20% of by staying 2 nights)</div>
<span class="hide sLink">http://via.placeholder.com/350x250</span>
</div>
<div class="left-split">
<a class="ads-links" title="Test Title Two" href="http://www.test.com/">
<h2>Test Title Two</h2>
</a>
<div class="coupon-text"></div>
<span class="hide sLink">http://via.placeholder.com/400x350</span>
</div>
</div>
<!-- Modal Box -->
<div class="modal CouponModal">
<span class="close-modal">×</span>
<div class="modal-content">
<input type="button" class="btnprint" name="btnprint" value="Print This Coupon" onclick="PrintC('cp-image')"/>
<div id="cp-image">
<img id="coupon-image" />
<div id="caption">
<span class="vist">Visit the website: <a id="c-weblink"></a></span>
</div>
</div>
</div>
</div>

How to get dimmer on specific card to toggle rather than all my card gallery using Semantic UI and JQuery

I have a gallery of avatars I want to show my user, which are shown in the card format of Semantic-UI. I want the user to click on one of the images which then triggers Semantic's dimmer to appear in that specific image's place.
What I currently get is that all the images get the dimmer to appear on them instead of the specific one I want. Here is the code that puts the dimmer on all images:
$(".selectavatar img").hover(function() {
$('.selectavatar img').removeClass('selectedImage');
$(this).toggleClass("selectedImage");
});
$(".selectavatar img").click(function() {
$(".ui.dimmer").dimmer("toggle");
});
<!--gallery goes here-->
<div class="ui three column grid selectavatar">
<div class="five wide column">
<div class="ui segment">
<form action="/account/<%=currentUser._id%>?_method=PUT" method="POST">
<input name="user[image]" type"submit" value = "image1.jpg" class="hidden" />
<img name="user[image]" src = "image1.jpg" width=300>
<div class="ui dimmer">
<div class="content">
<div class="center">
<button class="ui button blue" type="Submit">
<i class="user icon"></i> Select Avatar
</button>
</div>
</div>
</div>
</form>
</div>
</div>
<div class="five wide column">
<div class="ui segment">
<form action="/account/<%=currentUser._id%>?_method=PUT" method="POST">
<input name="user[image]" type"submit" value = "image2.png" class="hidden" />
<img name="user[image]" src = "image2.png" width=300>
<div class="ui dimmer">
<div class="content">
<div class="center">
<button class="ui button blue" type="Submit">
<i class="user icon"></i> Select Avatar
</button>
</div>
</div>
</div>
</form>
</div>
</div>
The way I envisioned it was that I'll add the class .selectedImage on the image the user wants, then I would be able to toggle the dimmer if selectedImage exists. But when I do use that as so:
$(".selectavatar img.selectedImage").click(function() {
$(".ui.dimmer").dimmer("toggle");
});
then nothing appears, no dimmer whatsoever!
What am I doing wrong?
As a side note, I need to figure out how to generate a gallery from a folder of images using EJS and NodeJS, instead of having to hard code each image. I guess the right thing to do would be a seperate question for that?

Your code will dim all .ui.dimmer divs when you click an image:
$(".selectavatar img").click(function() {
$(".ui.dimmer").dimmer("toggle");
});
This code will dim only the .ui.dimmer div which is located in the same parent container as the clicked image:
$(".selectavatar img").click(function() {
$(this).parent().find(".ui.dimmer").dimmer("toggle");
});
Part 2
Your code will set a click handler on all img.selectedImage which exist when you set the event handlers. Unfortunately no images have the selectedImage class at that point so it doesn't work.
$(".selectavatar img.selectedImage").click(function() {
//code
});
This code will do the same, but it only requires .selectavatar to exist when the event handler is set up:
$(".selectavatar").on("click", "img.selectedImage", function() {
//code
});

how to use classes to refer to the correct element in jquery

I have cards displayed on the website. I want to display a label on whichever card I am currently hovering on.
main.js
$('.card').on("mouseover", function () {
$('.ui.right.corner.label').show();
});
$('.card').on("mouseout", function () {
$('.ui.right.corner.label').hide();
});
This appeared to work fine until I realised that specific card's label is shown every time I hover on ANY of the cards.
Index.php
<!--first card-->
<div class="card" onclick="window.location='product.php';">
<img src="img/test1.jpg" class="image">
<a class="ui right corner label">
<i class="heart icon"></i>
</a>
</div>
<!--second card-->
<div class="card" onclick="window.location='product.php';">
<img src="img/test2.jpg" class="image">
<a class="ui right corner label">
<i class="heart icon"></i>
</a>
</div>
<!--third card-->
<div class="card" onclick="window.location='product.php';">
<img src="img/test3.jpg" class="image">
<a class="ui right corner label">
<i class="heart icon"></i>
</a>
</div>
I have currently fixed the child element problem by using Rajaprabhu's answer. However, the label is now appearing on the website by default. I am using .hide to hide them but is there a better way to not show the label when website is loaded?

That is because you are showing and hiding all the elements with that particular class. Try this method.
$('.card').on("mouseover", function () {
$(this).children("a").show();
});
$('.card').on("mouseout", function () {
$(this).children("a").hide();
});

You have to use the this reference inside of those event handlers,
$('.card').on("mouseover", function () {
$('.ui.right.corner.label', this).show();
});
$('.card').on("mouseout", function () {
$('.ui.right.corner.label', this).hide();
});

get this anchor title text jQuery

I'm trying to get all anchor title text inside children div's
My HTML
<div onClick="openList();">
<div class="inc">
<div class="iWrap">
<a title="<div>blah1 blah1</div>"></a>
<a title="<div>blah2 blah2</div>"></a>
<a title="<div>blah3 blah3</div>"></a>
<a title="<div>blah4 blah4</div>"></a>
</div>
</div>
</div>
<div onClick="openList();">
<div class="inc">
<div class="iWrap">
<a title="<div>some text 1</div>"></a>
<a title="<div>some text 2</div>"></a>
<a title="<div>some text 3</div>"></a>
<a title="<div>some text 4</div>"></a>
</div>
</div>
</div>
My jQuery code
function openList()
{
var getTitletxt = $(this).find('a').attr("title");
console.log(getTitletxt);
}
I'm getting undefined in my console.log. Basically i'm trying to fetch text inside title div.

Don't use inline event handlers. You can use on for binding events.
HTML:
<div class="myClass">
<!-- ^^^^^^^^^ -->
<div class="inc">
<div class="iWrap"> <a title="<div>blah1 blah1</div>">a</a>
<a title="<div>blah2 blah2</div>">b</a>
<a title="<div>blah3 blah3</div>">c</a>
<a title="<div>blah4 blah4</div>">d</a>
</div>
</div>
</div>
<div class="myClass">
<!-- ^^^^^^^^^ -->
<div class="inc">
<div class="iWrap"> <a title="<div>some text 1</div>">aa</a>
<a title="<div>some text 2</div>">bb</a>
<a title="<div>some text 3</div>">cc</a>
<a title="<div>some text 4</div>">dd</a>
</div>
</div>
</div>
Javascript:
$('.myClass').on('click', 'a', function() {
alert($(this).attr('title'));
});
Demo: http://jsfiddle.net/tusharj/zfboe9o1/

Pass current object using this, by default this is not available of you bind handler use javascript inline handler. Your title is also not valid, you problably need on text that is not enclosed in div.
Live Demo
<div onClick="openList(this);">
function openList(obj)
{
var getTitletxt = $(obj).find('a').attr("title");
console.log(getTitletxt );
}
Change
<a title="<div>some text 1</div>"</a>
To
<a title="some text 1"> anchor 1 </a>
For custom tooltip class you can make css class, I took it from answer here.
Live demo with tool tip custom style
a.ac[title]:hover:after
{
}

First close your Tag.
<a title="<div>some text 1</div>"> </a>
Pass this as parameter in function
<div onClick="openList(this);">
function openList($this)
{
$($this).find('a').each(function(){ // To get all <a> tag title
var getTitletxt = $(this).attr("title");
console.log(getTitletxt );
});
}

JS- How to change image on Mouseout

I have an banner with mouse over effects here:
As you can see the mouseover effects are working perfectly however I don't know how to make a mouse out animation. Here are its current codes:
Javascript:
var gotolink = "#";
function changeimage(imageNumber, url) {
if (document.images) {
document.images.targetimage.src =
document.getElementById('hiddenImages').children[imageNumber].src;
gotolink = url;
}
}
HTML:
DIV id=base>
<DIV id=mapcontainer>
<A href="javascript:warp()">
<IMG border=0 name=targetimage src="http://www.keencloudmedia.com/skybluekangaroo/map_wm.gif">
</A>
</DIV>
<DIV id=textcontainer>
<DIV class=textboxinner1>
<A onmouseover=changeimage(2,this.href) href="index.html">8CCC REQUESTS/TALKBACK</A>
</DIV>
<DIV class=textboxinner2>
<A onmouseover=changeimage(1,this.href) href="index.html">Alice Springs 8952 7771</A>
</DIV>
<DIV class=textboxinner2>
<A onmouseover=changeimage(0,this.href) href="index.html">Tenant Creek 8952 7182</A>
</DIV>
<DIV class=textboxinner3>
<SPAN class=t3nonelink>...other contact details <A onmouseover=changeimage(2,this.href) href="index.html">here</A></SPAN>
</DIV>
</DIV>
</DIV>
<div id="hiddenImages" style="display: none">
<img src="http://www.keencloudmedia.com/skybluekangaroo/map_wm_hover.gif" name="hoverImage" />
<img src="http://www.keencloudmedia.com/skybluekangaroo/map_wm_hover2.gif" name="hoverImage2" />
<img src="http://www.keencloudmedia.com/skybluekangaroo/map_wm.gif" name="originalImage" />
</div>
Hope you could help me achieve the mouseout effect.

I recommend using either 'onmouseout="changeimage(2,this.href)"' (in the same place as the mouseover property. Or use a jQuery handler, which is more complex for your needs really.