Show the right text in a slideshow with .onclick

Question

I made a simple slideshow with JavaScript that work fine. I would like to show a specific text block when the user click on the picture.

HTML :

<p>
                <img src="images/USA/desert (2).jpg" id="images/USA/desert.jpg" class='miniature'>
                <img src="images/USA/dropdown_map (2).jpg" id="images/USA/dropdown_map.jpg" class='miniature'>
                <img src="images/USA/pont (2).jpg" id="images/USA/pont.jpg" class='miniature'>
                <img src="images/USA/statue (2).jpg" id="images/USA/statue.jpg" class='miniature'>
                <img src="images/USA/whitehouse (2).jpg" id="images/USA/whitehouse.jpg" class='miniature'><br />
                <img id="grand" src="images/USA/desert.jpg" /><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
            </p>

            <p class='description' id="images/USA/desert.jpg">
                1111
            </p>

            <p class='description' id="images/USA/dropdown_map.jpg">
                2222
            </p>

JS :

    $(function() {
    $('.miniature').css('border','5px white solid');
    $('.miniature:first').css('border','5px black solid');$(function() {
    $('.miniature').css('border','5px white solid');
    $('.miniature:first').css('border','5px black solid');
$('.miniature').click(function() {
      $('.miniature').css('border','5px white solid');
      $(this).css('border','5px black solid');
      var nom = $(this).attr('id'); // for the slideshow
      $('#grand').attr('src',nom); // for the slideshow
      $('p.description').attr('id', nom).show(); // For showing the text
    });

With this code, there is no text with the default picture. Then, when I click on a picture, all blocks appear and stay. Can someone tell me what's wrong ?

score 1 · Accepted Answer · edited May 23 '17 at 11:45

The main issue is this line:

$('p.description').attr('id', nom).show();

This line gets all the paragraphs with class 'description' and then sets their id to nom and then shows all of that list of objects, which in this case is anything that matches p.description.

This is jQuery chaining of functions. The attr() function is not filtering it down for you.

Also, unfortunately, '\' in selectors for jQuery is no good (see here). "." is used to select classes so it won't work inside a name. Finally, you wouldn't want to have multiples of the same id in your DOM.

Here's an example that uses underscores in your id names and drops the file extension, and keeps the id's unique, achieving what I believe is the effect you wanted: http://jsfiddle.net/sz9wep8f/1/

And note, I don't have the files you wanted so there's a broken image for the grand — TiltedListener, Nov 13 '14 at 20:31

score 0 · Answer 2 · answered Nov 13 '14 at 20:11

You're setting the id of all p.description elements to nom. You want to get the value instead. You could change the last line to something like this:

$('#' + nom).show();

Adding the second parameter sets the attribute defined in the first. When the second parameter is ommitted, you're getting the value of that parameter.

http://api.jquery.com/attr/

Show the right text in a slideshow with .onclick

2 Answers2