CODEWITHSUNDEEP
javascriptjqueryhtml
vbotio
vbotio

Reputation: 1674

Setting Attr to closest <a> using src img

I know it's a really basic question. I'm trying to get the "src" as a variable and set it to the closest in "href".

Fiddle: http://jsfiddle.net/vitorboccio/EUpRg/1/

HTML:

<div id="instafeed">
    <a href="javascript:void(0);">
        <img src="http://scontent-a.cdninstagram.com/hphotos-xaf1/t51.2885-15/915462_665185033531202_40962267_s.jpg" />
    </a>
    <a href="javascript:void(0);">
        <img src="http://scontent-b.cdninstagram.com/hphotos-xpf1/t51.2885-15/10299842_1424124577859264_383342252_s.jpg" />
    </a>
</div>

js:

function changeURL () {
    //var srcImg = this.src;
    var srcImg = $(this).attr("src");
    console.log(srcImg);
    $("#instafeed").closest('a').attr('href', srcImg);
}

$("#instafeed").on('click', 'img', function () {
    changeURL();        
});

thanks

Upvotes: 1

Views: 215

Answers (5)

Alnitak
Alnitak

Reputation: 339816

Get rid of the anonymous function wrapping the call to changeURL - it's breaking the automatic behaviour of jQuery that sets this in the called function to be the clicked element:

$('#instafeed').on('click', 'img', changeURL);

You also then need to refer to that clicked element inside the handler, instead of #instafeed:

function changeURL() {
    $(this).closest('a').prop('href', this.src);
 };

NB: I've changed $(this).attr('src') to just this.src. The only difference is that the latter will be a fully qualified absolute URL, whereas the former might be relative. I've also used .prop instead of .attr to set the property, since that's the more idiomatic way of changing an element's properties since jQuery 1.6

Also, if the <a> element is always the direct ancestor the optimal solution would be this, eliminating all five calls to jQuery in your original code with direct DOM manipulation:

function changeURL() {
    this.parentNode.href = this.src;
};

Upvotes: 1

Derek
Derek

Reputation: 2735

After viewing your codes, I think you are trying to get the image src and set it to href in the closest <a> tag. If so, find the closest <a> from the <img>

function changeURL () {
    var srcImg = $(this).attr("src");
    console.log(srcImg);
    $(this).closest('a').attr('href', srcImg); 
    // the $(this) is referring to <img>
}

$("#instafeed").on('click', 'img', changeURL);

Upvotes: 0

Amit Kumar
Amit Kumar

Reputation: 5962

you can try 

function changeURL (imgElement) {
    var srcImg = imgElement.attr("src");
    console.log(srcImg);

    $("#instafeed").find('a:eq(0)').prop('href', srcImg);
}

$("#instafeed").on('click', 'img', function () {

    changeURL($(this));        
});
[Demo][1]

Upvotes: 0

Robert Messerle
Robert Messerle

Reputation: 3032

I changed the JS to this:

function changeURL () {
  var srcImg = $(this).attr("src");
  console.log(srcImg);
  $(this).closest('a').attr('href', srcImg);
}

$("#instafeed").on('click', 'img', changeURL);
  • Removed anonymous function around changeURL binding, now binding directly to changeURL method, thus keeping the this reference.
  • Changed .closest() call to be happening on the img tag rather than #instafeed

http://jsfiddle.net/EUpRg/3/

Upvotes: 0

ffflabs
ffflabs

Reputation: 17481

changeURL receives no parameter and has no way to guess what image are you addressing.

Try this

function changeURL (imgElement) {
    var srcImg = imgElement.attr("src");
    console.log(srcImg);
    imgElement.closest('a').attr('href', srcImg);
}

$("#instafeed").on('click', 'img', function () {
    changeURL(jQuery(this));        
});

Upvotes: 2

Related Questions