Toggling multiple image sets using #infotoggler inside tables

Question

I am trying to create a web based scorecard for a charity games night. Players images will be used to keep track of scores/turns. When a player "dies" I want to be able to click on their face, and replace it with a comedy death pic.

So, I started by using

$("#infoToggler").click(function() {
    $("#infoToggler img").toggle();

In the header, and then, in each character box, used

<td>
    <div id="infoToggler"> <img src="PLAYER1.jpg" /> <img src="Player1dead.jpg"
    style="display:none"/> 
     </div>
     <br>
      <input size="9" type="text"> </td>

obviously changed for each character. This is run off a local machine, and the images are only 120px, so loading time's not an issue.

No training, this is literally pick-n-stich coding, so I could really do with a hand. Am I missing something bleeding obvious? Do I need to set up a code for each of 10 players? Help much appreciated!

If I understood your problem correctly, your code changed the image for all the players. If that is the case, try something like this: `$('#infoToggler').click(function(){$(this).find('img').toggle()})` If that is not the case you need to provide more information about your html structure . — atomman, Apr 02 '15 at 12:02

Benjamin Ray · Accepted Answer · 2015-04-02T13:19:20.147

1

If you will have 10 players visible on the same page, you will need to change infoToggler from an ID to a class, as no two elements on a page can share the same ID.

Then you can provide a handler that will be executed when any TD of that class is clicked. In the handler, find and toggle any images within that TD.

This example will work with multiple player images:

JavaScript

$(function() {
    $('.infoToggler').click(function() {
        $(this).find('img').toggle();
    });
});

HTML

<table>
    <tr>
        <td>
            <div class="infoToggler">
                <img src="http://lorempixel.com/200/300/people/6/" />
                <img src="http://placehold.it/200x300/dddddd" style="display:none" />
            </div>
            <br />
            <input size="9" type="text" />
        </td>
        <td>
            <div class="infoToggler">
                <img src="http://lorempixel.com/200/300/people/8/" />
                <img src="http://placehold.it/200x300/dddddd" style="display:none" />
            </div>
            <br />
            <input size="9" type="text" />
        </td>
        <td>
            <div class="infoToggler">
                <img src="http://lorempixel.com/200/300/people/9/" />
                <img src="http://placehold.it/200x300/dddddd" style="display:none" />
            </div>
            <br />
            <input size="9" type="text" />
        </td>
    </tr>
</table>

Demo: http://jsfiddle.net/BenjaminRay/k7bLwc70/

According to the comments, you also have an issue with the placement of your tag. Your should fall after the link to jQuery, which should be right before the closing body tag. Here's a rough outline:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>title</title>
    <!-- Link to style sheets here -->
  </head>
  <body>
    <!-- body content -->

    <!-- JavaScript before </body> tag -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
  <script>
    // Your custom JavaScript here
  </script>
  </body>
</html>

edited Apr 02 '15 at 13:19

answered Apr 02 '15 at 12:05

Benjamin Ray

1,855
1
14
32

So, I have it now as..

I get the base pics, but nothing onclick – Macula Apr 02 '15 at 12:36
Yes, that HTML will work for each player. Copy & paste the JavaScript again to make sure you've got it right. – Benjamin Ray Apr 02 '15 at 12:41
still only getting the original images. can I be a pain and ask for dummy level advice on exactly what the head text should be? (I can post the whole thing somewhere, but it's as verbose as fudge) – Macula Apr 02 '15 at 12:55
I edited the answer, putting the JavaScript binding inside $(function() { ... } so that the binding occurs after the DOM is ready. Try again with the revised JavaScript. Your issue might be that your JS is being executed too early, and this will solve that. – Benjamin Ray Apr 02 '15 at 13:00
still nowt. My entire header is.. – Macula Apr 02 '15 at 13:03
Your – Benjamin Ray Apr 02 '15 at 13:14
OK, .js hosted locally, header now reads Still nowt but the initial image. by the way, you are so getting a thanks on the event! – Macula Apr 02 '15 at 13:44
Post the whole source to http://pastebin.com and send me the link. You should still move all of the JavaScript to the end of the body, i.e. before the closing
tag.
– Benjamin Ray Apr 02 '15 at 13:50
This works now: http://pastebin.com/SNvmTaKT I made these changes (and some small tweaks): Moved your JavaScript to the end of the body. Added a missing set of "});" at the end of the script. Added missing
at end of file. Added missing
at end of file. Added mising
– Benjamin Ray Apr 02 '15 at 14:29
You are an absolute star! Need to host the jquery locally, as not sure I'll have net at the venue. thankyou! – Macula Apr 02 '15 at 14:36

score 0 · Answer 2 · answered Apr 02 '15 at 12:14

0

You have 10 divs with the same id ,the toggle event will toggle all 10 you need diferent ids or a class and select the child image

answered Apr 02 '15 at 12:14

madalinivascu

32,064
4
39
55

Toggling multiple image sets using #infotoggler inside tables

2 Answers2