如何从图像的src值填充href值？

Question

I know this is super simple, but I can't work it out (I'm a designer).

I want to simply populate the href attribute value of the <a> tag, with the value of the src attribute of the <img> tag. So the image links to itself basically.

the image src will be updated through a super simple CMS and I want the link to dynamically update, instead of the user having to update the URL also.

I tried something like this, but it didn't work.

<a rel="lightbox[job1]" href="()document.getElementById("gal1_img1").src">
<img id="gal1_img1" src="images/gallery/job1/image-1.jpg">`enter code here`
</a>

Answer 1

You cannot inline JavaScript inside attributes the way you have currently. You can add a script to the page to do this:

<a id="link" rel="lightbox[job1]" href="#">
<img id="gal1_img1" src="images/gallery/job1/image-1.jpg">`enter code here`
</a>

<script>
document.getElementById("link").href = document.getElementById("gal1_img1").src;
</script>

Answer 2

try this as your <a> 's href:

href="javascript:window.location=this.getElementsByTagName('img')[0].src;"

Assuming there's only ever one image inside these <a> tags, this should work for anyone who's NOT running with javascript disabled.

Answer 3

try this.

 var att = $('#gal1_img1').attr('src');
 $("a[rel*='lightbox[job1]']").attr('href',att);