jquery sender BY CLASS - javascript

<img href="a" class="myImg"></img>
<img href="b" class="myImg"></img>
<img href="c" class="myImg"></img>
How can I determine the href value of the image being clicked maybe by tracking click events on elements using css class myImg. You can also modify the html if it simplifies the jquery.Thanks

$('img.myImg').click(function(){
alert(this.href); //might not work
alert(this.getAttribute('href')); //definitely should work
});

$('.myImg').click(function() {
alert($(this).attr('href'));
});

Try this
$('.myImg').click(function(){
alert($(this).attr('href'));
});

$(document).ready(function() {
$(".myImg").click(function(e) {
alert($(this).attr("href"));
});
});

"img" tag doesn't have a "href" attribute. You have to put those images between link tags ("a");
<img src=".." class="myImg">
<img src=".." class="myImg">
<img src=".." class="myImg">
Then if you want to get the href, listen for the click event on the link;
$('a').click(function(e) {
console.log('selected href:', $(this).attr('href'));
// if you want you can stop executing the href
// e.preventDefault();
});
Check http://jsfiddle.net/demods/U7D2g/

Related

Jquery : Access data-link attribute

i want to get data-link attribute form an image click .
Following is my image tag
<a href="#" class="aclick">
<img data-link="petroliumjelly.php" src="productsimgs/petroliumjelly.png" class="img-responsive" id="2">
</a>
to get it on click this is what i am doing ,
<script type="text/javascript" language="javascript">
$(".aclick").click(function (e) {
e.preventDefault();
alert($(this).attr("data-link"));
var link = $(this).data("data-link");// tried both
console.log(link);
});
</script>
when i try to log or alert it, i get undefined
Please help me how can i fix it
Below is code snippet to help you. data-link attribute is in img tag and not in 'a' tag.
$(".aclick").click(function (e) {
e.preventDefault();
alert($(this).find('img').attr("data-link"));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#" class="aclick">
<img data-link="petroliumjelly.php" src="productsimgs/petroliumjelly.png" class="img-responsive" id="2">
</a>
The reason you're not getting a value is that you're getting the data-link attribute of the anchor tag as that is what represents this. If you find the child image you'll get the data-link. Here is a fiddle of it working.
<script type="text/javascript" language="javascript">
$(".aclick").click(function (e) {
e.preventDefault();
alert($(this).find('img').attr('data-link'));
var link = $(this).find('img').attr('data-link')
console.log(link);
});
</script>
You can try this,
<script type="text/javascript" language="javascript">
$(".aclick").click(function (e) {
e.preventDefault();
alert($(this).find('img').attr('data-link'));
var link = $(this).find('img').attr('data-link')
console.log(link);
});
</script>
In the context, $(this) refers to the link, not the image.
To get the image instead, use:
var link = $('img', $(this)).data('link');
That gets the img element inside the link (which is $(this)).
Read more about the .data()-method here: https://api.jquery.com/data/
In my opinion, it makes it a bit cleaner than using the .attr()-method.
You assign you data-link attribute in img tag,
so you have to write click event on img tag
$(".aclick img").click(function (e) {
e.preventDefault();
alert($(this).data("link"));
var link = $(this).data("link");
console.log(link);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#" class="aclick">
<img data-link="petroliumjelly.php" src="productsimgs/petroliumjelly.png" class="img-responsive" id="2">
</a>
You click event must be on the image tag as well.
<script type="text/javascript" language="javascript">
$(".aclick img").click(function (e) {
e.preventDefault();
alert($(this).attr("data-link"));
var link = $(this).attr("data-link");// tried both
console.log(link);
});
</script>
working Fiddle
$(".aclick img").click(function (e) {
e.preventDefault();
alert($(this).attr("data-link"));
var link = $(this).attr("data-link");// tried both
console.log(link);
});
<script
src="https://code.jquery.com/jquery-3.2.1.min.js"
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
crossorigin="anonymous"></script>
<a href="#" class="aclick">
<img data-link="petroliumjelly.php" src="productsimgs/petroliumjelly.png" class="img-responsive" id="2">
</a>
Img is the child element of a.so try with $(this).children('img') .And use use with data('link') instead of data('data-link')
$(".aclick").click(function(e) {
e.preventDefault();
alert($(this).children('img').attr("data-link"));
var link = $(this).children('img').data("link"); // tried both
console.log(link);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#" class="aclick">
<img data-link="petroliumjelly.php" src="productsimgs/petroliumjelly.png" class="img-responsive" id="2">
</a>
this refers to the anchor tag not the image tag.
use this
$('.aclick img').attr("data-link");
On (.aclick).click() data-link will return undefined, the data-link is on the image, get the image using .find()
The find() method returns descendant elements of the selected element.
To get the value of data* use .data()
The data-* attributes is used to store custom data private to the page or application.
.data() Store arbitrary data associated with the matched elements or return the value at the named data store for the first element in the set of matched elements.
$(".aclick").click(function (e) {
e.preventDefault();
var link = $(this).find('img').data('link');
console.log(link);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#" class="aclick">
<img data-link="petroliumjelly.php" src="productsimgs/petroliumjelly.png" class="img-responsive" id="2">
</a>

How to add a click function on an image

I am trying to write a function so that when I click on an image it loads external content.
<section class='images'>
<img class="review-img" id="lifeofpi" src="./images/lifeofpi.jpg"></img>
</section>
$(document).ready(function(){
$("#lifeofpi").click(function(){
$("#lifeofpi").load("lifeofpi.txt #p1");
});
});
When I click on the image I want it to load this external content from a text document. But when I click on the image nothing happens.
You are trying to load content into the image. You need to add it to an element that can actually have children.
<section class='images'>
<img class="review-img" id="lifeofpi" src="./images/lifeofpi.jpg">
<div id="lifeofpi_details"></div>
</section>
$(document).ready(function(){
$("#lifeofpi").on("click", function () {
$("#lifeofpi_details").load("lifeofpi.txt #p1");
});
});
$("#lifeofpi").on("click","#p1 lifeofpi.txt",function (e) {
e.preventDefault();
alert(this.id);
});
Read about event-delegation

Get the path of the particular clicked image

Demo is here.
When I click on any image, I want to get the path of that image. The problem here is that only the path of image 1 is being given every time.
Also, with that new src, i want to add that src in the image having id= cropimage
$(".img").click(function() {
var newsrc = $(".img").attr("src");
alert(newsrc);
});
Use $(this) inside click event handler to get the element that is clicked. $(this) inside event handlers is the element on which the event has occurred.
If you use $('.img'), it'll select all the elements having class img and when use attr on it, it'll return the attribute value of the first matched selector.
Demo
$(".img").click(function() {
var newsrc = $(this).attr("src");
$('#cropimage').attr('src', newsrc);
// Even Shorter Form
// $('#cropimage').attr('src', $(this).attr('src'));
});
#cropimage {
background: yellow;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<img class="img" src="http://www.w3schools.com/images/w3schools.png" />
<br/>
<img class="img" src="https://www.google.co.in/images/icons/hpcg/ribbon-black_68.png" />
<div id="img-container">
<img src="" id="cropimage" />
</div>
Please check this link Js Fiddle it will help you.
$( ".img" ).click(function() {
var newsrc=$(this).attr("src");
//alert(newsrc);
$( "#cropimage" ).attr("src",newsrc);
});

Link not working on image?

I've been attempting to create an effect where a user clicks on an image, that image is replaced by another image which also acts as a link.
However my problem is that whenever I click the replaced image, the link doesn't work.
Fiddle: http://jsfiddle.net/ha6qp7w4/321/
$('.btnClick').on('click',function(){
$(this).attr('src','https://placekitten.com/g/200/300')
$(this).attr('href','google.com')
});
img tags don't have href properties. You need to wrap the image in an anchor and assign the url to that, or do a custom redirect.
Notice your image html on inspection of element:
<img src="https://placekitten.com/g/200/300" id="1" class="btnClick" href="google.com"> <!-- not valid! -->
This isn't valid because imgs aren't anchors!
function first() {
this.src = 'https://placekitten.com/g/200/300';
$(this).unbind("click");
$(this).on("click", second);
}
function second() {
window.location.href = "https://www.google.com";
$(this).unbind("click");
$(this).on("click", first);
}
$('.btnClick').on('click', first);
(I tried to make a fiddle but it wouldn't save, but this should work)
You need to store your actions in functions so you can revert if need be. First action is the change the source, then change the event to redirect you like a link.
here is an example.
example
html part
<img src="http://i.imgur.com/o46X87d.png" data-new="http://i.imgur.com/9lf2Mjk.png" id="1" class="btnClick" />
add data-new attribute on image with new url of image
and replace it with js
$('.btnClick').on('click',function(){
var url = $(this).attr("data-new");
$(this).attr("src", url);
});
I would use a totally different approach, but here's how to do that with the code you already have:
<div class="btnClick">
<img src="http://i.imgur.com/o46X87d.png" id="1" />
<a href="javascript:check()" id="2" style="display:none;">
<img src="http://i.imgur.com/9lf2Mjk.png" id="static" />
</a>
</div>
<script type="text/javascript">
$('.btnClick').on('click',function(){
if($('#1').is(':visible')) {
$('#1').hide();
$('#2').show();
} else {
$('#1').show();
$('#2').hide();
}
});
</script>
I purposely didn't use toggle() to better show the technique, in case you'd want to turn the click event off when the clicking image appears etc.

jquery not() not working as expected

<div class="row">
<img src="images/image.png" width="30" height="30" alt=""/>
View
</div>
$(".row").not(".row a").click(function(){
// irrelevant
})
I can't figure out why this isn't working. I don't want to call the function when "View" is clicked.
Is this ,what you were looking for?
$(".row").on('click',':not(a)', function(){
});
Adds 'click' event listener on all child elements of '.row', except 'a' elements.
Use this:
$(".row").click(function(){
});
$('.row a').click(function(e){
e.stopPropagation(); //this cancel the other events
});

Categories

Resources