Question

I want to write a script that changes page content but within a foreach array. I have this HTML:

<div id="bigleftproject">

    <p>content which will be swapped</p>

</div>


<!-- thumbnails (foreach array -->
<div class="prj_thumb" id="thumb1"> 
    <h2 class="active">project 1</h2>
    <img src="../img/thumbnail1.png" alt="thumbnail" width="100" height="50" />
</div>

<div class="prj_thumb" id="thumb2"> 
    <h2 class="active">project 2</h2>
    <img src="../img/thumbnail2.png" alt="thumbnail" width="100" height="50" />
</div>

<div class="prj_thumb" id="thumb3"> 
    <h2 class="active">project 3</h2>
    <img src="../img/thumbnail3.png" alt="thumbnail" width="100" height="50" />
</div>
<!-- end -->

and I have the beginnings of my jQuery script:

$(document).ready(function(){
    $('.prj_thumb').click(function() {
        $('#bigleftproject').load('http://www.mysite.com/projects/small/thumb1');
    });
});

Essentially, what I am trying to achieve is for the jQuery script to grab the ID of ‘.prj_thumb’ and pass that into the final part of the URL in the .load function.

Answer 1

Is this what you’re looking for?

$(document).ready(function(){
    $('.prj_thumb').click(function() {
        $('#bigleftproject').load('http://www.mysite.com/projects/small/' + this.id);
    });
});