How can I pass custom set data to a src image "onClick"? - javascript

I have this function
function changeImage() {
console.log(event.target.getAttribute('data-image-path'));
document.getElementById('image-id').src = event.target.getAttribute('data-image-path');
}
on click I want to pass the data-image-path into the changeImage function, the data-image-path is inside the li so is the onclick:
<li data-image-path="./assets/img/my_imgs/features/sc2.png" onclick='changeImage(this.data-image-path)'>
<div class="inside-li">
<img src="./assets/img/my_imgs/features/feat1.png" alt="image">
<p>Easy Scheduling & Attendance Tracking</p>
</div>
<div class="plan-hr">
<hr class="hr-1">
<hr class="hr-2">
</div>
</li>
image:
I have multiple li elements and each contains a different src image inside its data-image-path but how can I pass the data?
This is the img element that should recieve the src:
<div class="image-loader col-md-6 col-sm-12">
<div class="banner-thumb-wrap">
<div class="banner-thumb">
<img class="header-inner-img" id="image-id">
</div>
</div>
</div>
Here is the result in my console.log and code:

Try this, pass this to changeImage function and get the attribute of the clicked element.
function changeImage(obj) {
var imagePath2 = obj.getAttribute('data-image-path');
document.getElementById('image-id').src = imagePath2;
}
<li data-image-path="./assets/img/my_imgs/features/sc2.png" onclick='changeImage(this)'> </li>

You can change your HTML into this:
<li data-image-path="./assets/img/my_imgs/features/sc2.png" onclick='changeImage(event.target.dataset.imagePath)'> </li>
But there is a better version:
Select the li elements with querySelectorAll and addEventListener for them afterward.

Use event.target.getAttribute('data-image-path') to get the clicked li's data-image-path value inside changeImage() method.
function changeImage() {
console.log(event.target.getAttribute('data-image-path'));
document.getElementById('image-id').src = event.target.getAttribute('data-image-path');
}
<img class="header-inner-img" id="image-id">
<li data-image-path="./assets/img/my_imgs/features/sc2.png" onclick='changeImage()'> </li>

I slightly changed your html code, and significantly changed the js code using the forEach method, with a click listener inside. This means that calling the onclick=changeImage (this.data-image-path) event is no longer needed! I also left the console so that you can see which attribute is being loaded on click at the moment.
I hope that is exactly what you needed.
var li_attr = document.querySelectorAll('li');
var img = document.getElementById('image-id');
Array.from(li_attr).forEach(function(li_attrArray, i) {
li_attrArray.addEventListener('click', function() {
imagePath2 = li_attrArray.getAttribute('data-image-path');
img.src = imagePath2;
console.log(img.src);
});
});
<li data-image-path="./assets/img/my_imgs/features/sc1.png">1</li>
<li data-image-path="./assets/img/my_imgs/features/sc2.png">2</li>
<li data-image-path="./assets/img/my_imgs/features/sc3.png">3</li>
<li data-image-path="./assets/img/my_imgs/features/sc4.png">4</li>
<img class="header-inner-img" id="image-id">

You can pass the event and then access the data through the event.target.getAttribute()
function changeImage(e) {
const dataImagePath = e.target.getAttribute('data-image-path');
document.getElementById('image-id').src = dataImagePath;
console.log(dataImagePath);
console.log(document.getElementById('image-id').src);
}
<li data-image-path="./assets/img/my_imgs/features/sc2.png" onclick='changeImage(event)'> </li>
<img class="header-inner-img" id="image-id">

Related

Javascript - populate a div with content from a hidden div using click buttons

I need some help. As you will see in my fiddle, I am attempting to use buttons to populate a single container div with content from multiple hidden divs, depending on which button is clicked. The problem I am having is, I don't know how to access the actual content in the hidden divs to populate the container div. As of now, I am using the id attributes for the hidden divs to demonstrate which div content I would like to display in the container.
I've seen a few other posts with link <a> attributes referencing hidden content, but none so far using a button element with click functionality to change div content.
jQuery(function ($) {
$('#button1').click(function () {
$('#info').empty();
$('#info').prepend('#option1');
});
$('#button2').click(function () {
$('#info').empty();
$('#info').prepend('#option2');
});
$('#button3').click(function () {
$('#info').empty();
$('#info').prepend('#option3');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="button-panel">
<ul id="button-column" style="list-style: none;">
<li class="buttons"><button id="button1">Button 1</button></li>
<li class="buttons"><button id="button2">Button 2</button></li>
<li class="buttons"><button id="button3">Button 3</button></li>
</ul>
</div>
<div id="info-div">
<div id="info"></div>
</div>
<div id="hiddenDivs" style="display:none;">
<div class="info" id="option1">Box</div>
<div class="info" id="option2">Google Drive</div>
<div class="info" id="option3">Box</div>
</div>
Here is my fiddle
Here's a version that uses jquery data attributes. It reduces the redundancy and complexity and can be configured easily.
<body>
<div class="button-panel">
<ul id="button-column" style="list-style: none;">
<li class="buttons"><button id="button1" data-link="option1">Button 1</button></li>
<li class="buttons"><button id="button2" data-link="option2">Button 2</button></li>
<li class="buttons"><button id="button3" data-link="option3">Button 3</button></li>
</ul>
</div>
<div id="info-div">
<div id="info">
</div>
</div>
<div id="hiddenDivs" style="display:none;">
<div class="info" id="option1">Box</div>
<div class="info" id="option2">Google Drive</div>
<div class="info" id="option3">Box</div>
</div>
</body>
<script>
$('.buttons button').click(function (){
$('#info').empty();
$('#info').html($("#" + $(this).data('link')).html());
});
</script>
Example : https://jsfiddle.net/yvsu6qfw/3/
It sounds like maybe you were looking for using the button itself to populate data built into the button with a data attribute or something? If so you can do something like this:
HTML
<div class="button-panel">
<ul id="button-column" style="list-style: none;">
<li class="buttons"><button data-info="Box">Button 1</button></li>
<li class="buttons"><button data-info="Google Drive">Button 2</button></li>
<li class="buttons"><button data-info="Box">Button 3</button></li>
</ul>
</div>
<div id="info-div">
<div id="info"></div>
</div>
jQuery
$(document).ready(function (){
$('#button-column button').click(function (){
$('#info').html($(this).attr('data-info'));
});
});
If you want the first button to load the content from the first hidden div etc. without relying upon using the id attributes, you can use the .index() method. When you pass this as an argument it will return the index value of the click event target in the collection $("#button-column .buttons :button"). Afterwards you can pass the index value to the .get() method to retrieve the corresponding element from the collection of hidden divs $("#hiddenDivs .info").
$().ready(function(){
$("#button-column .buttons :button").on("click", function(){
$('#info').empty();
var clickedIndex = $("#button-column .buttons :button").index(this);
var hiddenInfo = $("#hiddenDivs .info").get(clickedIndex);
$('#info').prepend( $(hiddenInfo).text() );
});
});
you can use html function, without parameter gets the content of the element
with parameter replaces the content with the string parameter
$(document).ready(function (){
$('#button1').click(function (){
$('#info').html( $('#option1').html() );
});
$('#button2').click(function (){
$('#info').html( $('#option2').html() );
});
$('#button3').click(function (){
$('#info').html( $('#option3').html() );
});
});
In your code example, you do for example:
$('#info').prepend('#option1');
What you instruct to do here, is adding a text string '#option1' to an element with ID info.
What you intend to do is prepending the content of ID option1 to the element with ID info. You could do something like this instead:
$('#info').prepend($('#option1').html());
Another approach could be (but I don't know if that's relevant for you) to not clone content (since it costs you repaints) but toggle the specific elements instead. For example:
$('#option1,#option2').hide();
$('#option3').hide();
And yet another one: use data-attributes on your buttons:
Button 1
Button 2
<div id="info">
</div>
And the JS:
$('.button').on('click', function(event) {
event.preventDefault();
$('#info').html($(event.currentTarget).attr('data-text'));
});
Don't repeat yourself! To get the number out of an ID replace with "" all that is not a number using RegExp \D.
Using number from ID
Than, to get the actual content you can use $("#option"+ num).html() or $("#option"+ num).text() methods:
jsFiddle demo
jQuery(function ($) {
$('.buttons button').click(function () {
var num = this.id.replace(/\D/g,"");
$("#info").html( $("#option"+ num).html() );
});
});
Target element using data-* attribute
Alternatively you can store inside a data-* attribute the desired target selector ID:
<button data-content="#option1" id="button1">Button 1</button>
and than simply:
jsFiddle demo
jQuery(function ($) {
$("[data-content]").click(function () {
$("#info").html( $(this.dataset.content).html() );
});
});
http://api.jquery.com/html/
http://api.jquery.com/text/
If the expectation is to get same indexed hidden div content, Then the below code should work.
$(document).ready(function (){
$('.buttons button').click(function (){
$('#info').empty();
var index = $('.buttons button').index($(this));
$('#info').html($('.info:eq('+index+')').html());
});
});

jQuery append an img to every div

I am trying to display a thumbnail image with every thumb class, but currently I am getting the output below where the images are looping inside the href instead. The order of div, href and img must not change. It looks something like this jsfiddle but this isn't fully working of course...
currently getting:
<div class ='thumb'>
<a href="#" rel="1">
<img src="">
</a>
<img src="">
<img src="">
</div>
required output:
<div class ='thumb'>
<a href="#" rel="1">
<img src=>
</a>
</div>
<div class ='thumb'>
<a href="#" rel="1">
<img src="">
</a>
</div>
my loop:
var thumbnails = [];
$.each(data.productVariantImages,function(key, val){
thumbnails.push(val.imagePath);
});
for(var thumb in thumbnails) {
$('.thumb').append($('<img>').attr({
"src":[thumbnails[thumb]]
}));
}
am i looping it wrongly?
edit:
The thumbnails are part of a dynamic gallery where basically every time a user choose a different option in a dropdown list, the sources for the thumbs are supposed to change accordingly.
current html:
<div class="thumbnail"><?php
foreach($skuDetails['productVariantImages'] as $variantImage){
if(isset($variantImage) && $variantImage['visible']){
?>
<div class="thumb">
<a href="#" rel="1">
<img src="<?php echo $variantImage['imagePath']; ?>" id="thumb_<?php echo $variantImage['id']; ?>" alt="" />
</a>
</div> <?php }}?>
</div>
sample array of thumbnails:
["http://tos-staging-web-server-s3.s3.amazonaws.com/9/catalogue/apples_in_season.png",
"http://tos-staging-web-server-s3.s3.amazonaws.com/9/catalogue/apples_in_season.png"]
sample output:
<div class="thumbnail">
<div class="thumb">
<a href="#" rel="1">
<img src="http://tos-staging-web-server-s3.s3.amazonaws.com/9/catalogue/apples.png" id="thumb_323" alt="">
</a>
</div>
<div class="thumb">
<a href="#" rel="1">
<img src="http://tos-staging-web-server-s3.s3.amazonaws.com/9/catalogue/apples.png" id="thumb_323" alt="">
</a>
</div>
</div>
You need to use .each function on .thumb. Something like:
$(document).ready(function(){
$('.thumb').each(function(){
$(this).append($('<img>').attr({"src":[thumbnails[thumb]],}));
});
});
your loop is focused on wrong element. You append img tag to the thumb class. So, the img tags inside the same element. You should create div has thumb class inside the loop, and append it to the thumbnail div. That must like
var div = $(".thumbnail");
$.each(imageArray, function(index, value){
var elem = "<div class='thumb'><a href='#' rel='1'></div>";
div.append($elem);
$('.thumb').append("<img />").attr("src", value);
});
It may be wrong but you should watch the thumbnail element. I cannot write the code to test. But I think the logic must be like this.
If you want that exact structure, I made a demo using plain JavaScript. Enter a number and the thumbClone() function will generate that many. You could probably adapt this function with your existing code easily. I'm in rush, it probably needs refactoring, sorry. :-\
DEMO
function thumbClone(qty) {
var main = document.getElementById('main');
var aFig = document.createElement('figure');
var aLnk = document.createElement('a');
var aImg = document.createElement('img');
aLnk.appendChild(aImg);
aImg.src = "http://placehold.it/84x84/000/fff.png&text=THUMB"
aFig.appendChild(aLnk);
aLnk.setAttribute('rel', '1');
main.appendChild(aFig);
aFig.className = "thumb";
console.log('qty: ' + qty);
var thumb = document.querySelector('.thumb');
for (var i = 0; i < qty; i++) {
var clone = thumb.cloneNode(true);
thumb.parentNode.appendChild(clone);
}
}
You need to use each loop which will get each class rather than getting only one class below is syntax of each loop
$(selector).each(function(){
// do your stuff here
)};
in your case
$('.thumb a').each(function(){
// do your stuff here
$(this).append($('<img />').attr('src',[thumbnails[thumb]]);
)};
Looks like you need to create the entire div structure for each image.
Lets create the below structure dynamically using the max length of the image array and add the image src .
var thumbDivStart = "<div class ='thumb'><a href="#" rel="1">";
var thumbDivEnd = "</a></div>";
var thumbDiv = "";
for (i = 0; i < imageArray.length; i++) {
thumbDiv = thumbDivStart + "<img src="+imageArray[i]+"/>"+
thumbDivEnd;
//Here you can append the thumbDiv to the parent element wherever you need to add it.
}

Javascript get "clicked" element addEventListener

I know I can grab the element of an individual ID.
Anyway I can attach a listener to the parent div and pass the ID of the individual span that was clicked?
<div id = "divId">
<span id="one"></span>
<span id="two"> </span>
</div>
JS
document.getElementById("two").addEventListener("click", someFunction);
You can use the event object and access its target property
document.getElementById("divId").addEventListener("click", someFunction);
function someFunction(event) {
console.log(event.target.id);
}
<div id="divId">
<span id="one">one</span>
<span id="two"> two</span>
</div>
If the user clicked on a node that was a child of the element the user wanted to test e.target will be a different node. The sensible way to check this nowadays is to listen at the document level and iterate the path (or use some delegation library, of which there are many):
Add one event listener to the document:
const isOnId = (path,id) => path.some(element => element.id === id);
document.addEventListener('click',function(e) {
if(isOnId(e.path,'two')) {
//you clicked on or in element with an id two
} else {
//you clicked on something else
}
});
Adam's answer is correct and saves a lot of headaches. However there's a better and easiest way to acieve this. Please check this answer
Makes use of Event.currentTarget and it goes like this:
<ul>
<li class="list_item" data-mydata="hello there!">
<img src="..." alt="" width="50", height="50">
</li>
<li class="list_item" data-mydata="hello world">
<img src="..." alt="" width="50", height="50">
</li>
</ul>
<script>
const items = document.querySelectorAll(".list_item");
items.forEach(node => {
node.addEventListener("click", e => {
let myvalue = e.currentTarget.dataset.mydata;
console.log(myvalue); //hello there! || hello world It depends on which element the user has clicked
})
})
</script>
I hope this is useful
Since I do not have enough credits to comment, adding a new answer.
Unlike the answer shared by #CubeInTheBox, I think leveraging the concept of event capturing/bubbling for the respective element makes for a better implementation rather than adding an event listener to each of the target elements.
For the example shared above, the alternative would be:
<ul>
<li class="list_item" data-mydata="hello there!">
<img src="..." alt="" width="50", height="50">
</li>
<li class="list_item" data-mydata="hello world">
<img src="..." alt="" width="50", height="50">
</li>
</ul>
<script>
const parentElement = document.querySelector('ul');
parentElement.addEventListener('click', e => {
// If you want to add the listener on li alone and not on image
if (e.target.className === 'list_item') {
const myvalue = e.target.dataset.mydata;
console.log(myvalue);
}
});
</script>
NOTE that e.currentTarget wouldn’t work for this case, as it would return the parent ul to which the event is bound.

Multiple element, same class, get value of one element - jquery

I have this multiple elements with the same class.
<div class="test-container">
<a class="dup-class">
Get Value
</a>
<div class="product-list-col">
1
</div>
</div>
<div class="test-container">
<a class="dup-class">
Get Value
</a>
<div class="product-list-col">
2
</div>
</div>
<div class="test-container">
<a class="dup-class">
Get Value
</a>
<div class="product-list-col">
3
</div>
</div>
If I click the the <a> tag on the first div, it should alert the value of .product-list-col value which is 1
if I click the second div of anchor tag, it should alert 2
here's the code for it
$(".dup-class").on('click', function() {
cont = $(this + " .product-list-col").text();
alert(cont);
});
Any solution for this stuff?
Here's the jsfiddle of it: http://jsfiddle.net/Vigiliance/PLeDs/3/
You could use siblings(), the reason why your code doesn't work is because it's selecting all .product-list-col
$(".dup-class").on('click', function () {
cont = $(this).siblings('.product-list-col').text();
alert(cont);
});
or use .next()
$(".dup-class").on('click', function () {
cont = $(this).next('.product-list-col').text();
alert(cont);
});
do this:
$(".dup-class").on('click', function() {
cont = $(this).next().text(); // this is the line where change done
alert(cont);
});
http://jsfiddle.net/PLeDs/2/

How to get selected image's[multiple/all] value which is placed inside <LI>

I am working on ID card image[multiple] which is inside an LI element and in this process I have come up with below code. For single image path it is working fine. The requirement is to populate all the selected images path, when user click on "printBtn" button. I need to achieve it for PDF conversion(printing purpose). Any help? Thanks in advance.
HTML
<div class="idcard-cont">
<ul>
<li>
<img src="../../images/img-IDcard.gif" alt="" />
</li>
<li>
<img src="../../images/img-IDcard.gif" alt="" />
</li>
<li>
<img src="../../images/img-IDcard.gif" alt="" />
</li>
</ul>
</div>
<input type="button" value="Print" id="printBtn" />
JQUERY
$(".idcard-cont").find("li").on('click', function(){
var $this = $(this);
$this.toggleClass("selected");
if($this.hasClass("selected")){
alert($this.html());
}
});
$('#printBtn').click(function(){
var urls=[];
$('.idcard-cont .selected').each(function(){
urls.push($(this).find('img').attr('src'));
});
console.log(urls); //contains all the selected imgs
});
Sounds like you want to add to an array
I'm not an expert at jQuery by no means but maybe something like
var list = new Array();
$(".idcard-cont").find("li").on('click', function(){
var $this = $(this);
$this.toggleClass("selected");
if($this.hasClass("selected")){
list.push(item.text);
}
});
console.log(list.length);

Categories