Changing image in HTML using jquery when clicking on a li object

Question

I am attempting to change an image that is displayed when a user clicks on a list object. So if they click on Omega 001 it will change the picture and text displayed to that oh his. This is what I have:

<?php
    session_start();

?>
<html>
<head>
  <link rel="stylesheet" href="styles.css" type="text/css">
  <script src="jquery-2.2.0.min.js"></script>
</head>
<body>

<div id="header">
    <h1>THE BODAK</h1>
</div>

<ul>
    <li><a href="history.php">Back</a></li>
    <li><a href="#" class="link" id="link" data-title="Bounties/hape.jpg" data-bio="">Hape Atete</a></li>
    <li><a href="#" class="link" id="link2" data-title="Bounties/porsi.jpg" data-bio="">Porsi Skastrek</a></li>
    <li><a href="#" class="link" id="link3" data-title="Bounties/alfrekr.jpg" data-bio="">Alfrekr Reistr</a></li>
    <li><a href="#" class="link" id="link4" data-title="Bounties/brann.jpg" data-bio="">Brann Pust</a></li>
    <li><a href="#" class="link" id="link5" data-title="Bounties/alpha.jpg" data-bio="">44A61 Alpha</a></li>
    <li><a href="#" class="link" id="link6" data-title="Bounties/omega.jpg" data-bio="">Omega 001</a></li>
    <li><a href="#" class="link" id="link6" data-title="Bounties/bidayatan.jpg" data-bio="">Biayatan88B</a></li>
</ul><br><br><br><br>

<img src="Bounties/hape.jpg" id="pic" name="pic" alt="bounty" style="width:70%;height:100%;">
<div id="bio">AN ASSIGNED BOUNTY</div><br>
<script>

$(document).ready(function() {
    $('.link').on('click', function() {
        var $el = $(this);
        $(#pic).attr("src", text($el.data('title')));
        $("#bio").text($el.data('bio'));
    });
});


</script>


</body>
</html>

I am working off this

Javascript - Changing an image with variables

and going off another question I asked before which I got working:

onClick events on li items, to change textFields

Rayon · Accepted Answer · 2016-02-06 03:13:06Z

selector should be wrapped in quotes. There is method as text defined in script and I do not think you need any.

Note: data-bio is empty in all the li elements hence text of #bio will always be empty.

Try this:

$(document).ready(function() {
  $('.link').on('click', function(e) {
    e.preventDefault();
    var $el = $(this);
    alert($el.data('title'));
    $("#pic").attr("src", $el.data('title'));
    $("#bio").text($el.data('bio'));
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="header">
  <h1>THE BODAK</h1>
</div>

<ul>
  <li><a href="history.php">Back</a>
  </li>
  <li><a href="#" class="link" id="link" data-title="Bounties/hape.jpg" data-bio="">Hape Atete</a>
  </li>
  <li><a href="#" class="link" id="link2" data-title="Bounties/porsi.jpg" data-bio="">Porsi Skastrek</a>
  </li>
  <li><a href="#" class="link" id="link3" data-title="Bounties/alfrekr.jpg" data-bio="">Alfrekr Reistr</a>
  </li>
  <li><a href="#" class="link" id="link4" data-title="Bounties/brann.jpg" data-bio="">Brann Pust</a>
  </li>
  <li><a href="#" class="link" id="link5" data-title="Bounties/alpha.jpg" data-bio="">44A61 Alpha</a>
  </li>
  <li><a href="#" class="link" id="link6" data-title="Bounties/omega.jpg" data-bio="">Omega 001</a>
  </li>
  <li><a href="#" class="link" id="link6" data-title="Bounties/bidayatan.jpg" data-bio="">Biayatan88B</a>
  </li>
</ul>
<br>
<br>
<br>
<br>

<img src="Bounties/hape.jpg" id="pic" name="pic" alt="bounty" style="width:70%;height:100%;">
<div id="bio">AN ASSIGNED BOUNTY</div>
<br>

Glad to help! Kindly accept and upvote if it has solved the purpose.. :)

abetwothree · Accepted Answer · 2016-02-06 04:44:13Z

0

Try your Jquery like this.

$(document).ready(function() {
  $('.link').on('click', function() {
    var title = $(this).attr('data-title');
    var bio = $(this).attr('data-bio');
    $('#pic').attr("src", title);
    $('#bio').text(bio);
  });
});

answered Feb 6, 2016 at 4:44

abetwothree

5872 gold badges9 silver badges28 bronze badges

Collectives™ on Stack Overflow

Changing image in HTML using jquery when clicking on a li object

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related