Question

I have this:

$('li').click(function() { 
    var currentSrc = $('img', this).attr('src').toString();
    var grabAlt = $('img', this).attr('alt').split('|');
    //alert(grabAlt[0]);
    $('.imgSample img').attr('src', currentSrc);
    $('.projectDescription').html('<p class="projectDescription">' + grabAlt[0].join('</p>')); 
    $('.projectTitle').html(grabAlt[1]); 
});

When I remove the [0] and [1] I can alert either and what I’m thinking is the first value [0], does replace the project description, but trying to place each in the respective place doesn’t work at all.

snippet of relevant html:

<section class="workArea">
    <div class="imgSample"><img src="images/samples/testImage2.png" alt="This first part will be a short description. | this second part will be the title."></div>
    <p class="projectDescription">This is to be replaced when an image is clicked on.</p>
    <h3 class="projectTitle">To be replaced</h3>
</section>
</div>

<nav>
    <ul class="print">
        <li class="liRounded"><img width="50" height="50" src="images/samples/image1.png" alt="Should replace the content in the paragraph. | Replace title copy."></li>

        <li class="liRounded"><img width="50" height="50" src="images/samples/image2.png" alt="Second. | Replace title 2."></li>

        <li class="liRounded"><img width="50" height="50" src="images/samples/image3.png" alt="third. | Replace title 3."></li>
    </ul>
</nav>

Is it my syntax or usage that is wrong here?

Answer 1

You were nearly there, but not quite:

$('li').click(function() { 

    var img = $('img', this).get(0);
    var src = img.src;  // no need for .attr
    var alt = img.alt;  //     ditto

    var grabAlt = alt.split('|');

    $('.imgSample img').attr('src', currentSrc);
    $('.projectDescription').text(grabAlt[0]);
    $('.projectTitle').text(grabAlt[1]); 
});

Mostly, you don’t need to put a new <p> inside the .projectDescription element, you just needed to change its text contents.

As @gdoron alluded to, .join() doesn’t do what you appear to think it does – it takes an array of strings, and joins them together with the given separator. It doesn’t concatenate grabAlt[0] with </p>.