[SOLVED] Add class to two anchors when either is clicked
Hekko All,
I have two sets of paging links on my pages that need to be updated when one is clicked. i.e if page 3 at the top is clicked it gets the class 'currentPage' applied, but how do I het this to happen to the paging links at the bottom of the page?
Both sets of links are held in a div with class 'paging' all anchors in these divs have the same class 'ajaxpaging' and each has its own id corresponding to its page. The bottom paging links have 'b-' preceding the number.
here is my jQuery:
- $('a.ajaxpaging').click(function(){
var page = $(this).attr('title');//need to add to the bottom set of paging links as well??
$('a.currentPage').removeClass('currentPage');
$(this).addClass('currentPage');
$('span.pageNum').html(page);
var category = '[*category*]';//template variable in modx
$.ajax({
type: 'post',
dataType: 'html',
url: 'assets/files/ajax.category.list.php',
data: 'category='+category+'&page='+page,
success: function(data){
$('div#categoryResponse').html(data);
}
});//end ajax
});//end ajaxpaging click function
Here is my top paging links:
- <div class="paging"><span>Boudoir Page <span class="pageNum"></span></span>
<ul>
<li><a href="javascript:void(0);" id="1" class="ajaxpaging currentPage" title="1" cat="boudoir"> 1 </a> | </li>
<li><a href="javascript:void(0);" id="2" class="ajaxpaging" title="2" cat="boudoir"> 2 </a> | </li>
<li><a href="javascript:void(0);" id="3" class="ajaxpaging" title="3" cat="boudoir"> 3 </a> | </li>
<li><a href="javascript:void(0);" id="4" class="ajaxpaging" title="4" cat="boudoir"> 4 </a> | </li>
<li><a href="javascript:void(0);" id="5" class="ajaxpaging" title="5" cat="boudoir"> 5 </a> | </li>
<li><a href="javascript:void(0);" id="6" class="ajaxpaging" title="6" cat="boudoir"> 6 </a> | </li>
<li><a href="javascript:void(0);" id="7" class="ajaxpaging" title="7" cat="boudoir"> 7 </a> | </li>
<li><a href="javascript:void(0);" id="8" class="ajaxpaging" title="8" cat="boudoir"> 8 </a> | </li>
<li><a href="javascript:void(0);" id="9" class="ajaxpaging" title="9" cat="boudoir"> 9 </a> | </li>
<li><a href="javascript:void(0);" id="10" class="ajaxpaging" title="10" cat="boudoir"> 10 </a> | </li>
</ul>
</div>
<!-- /// end div.paging -->
And my bottom paging links:
- <div class="paging"><span>Boudoir Page <span class="pageNum"></span></span>
<ul>
<li><a href="javascript:void(0);" id="b-1" class="ajaxpaging currentPage" title="1" cat="boudoir"> 1 </a> | </li>
<li><a href="javascript:void(0);" id="b-2" class="ajaxpaging" title="2" cat="boudoir"> 2 </a> | </li>
<li><a href="javascript:void(0);" id="b-3" class="ajaxpaging" title="3" cat="boudoir"> 3 </a> | </li>
<li><a href="javascript:void(0);" id="b-4" class="ajaxpaging" title="4" cat="boudoir"> 4 </a> | </li>
<li><a href="javascript:void(0);" id="b-5" class="ajaxpaging" title="5" cat="boudoir"> 5 </a> | </li>
<li><a href="javascript:void(0);" id="b-6" class="ajaxpaging" title="6" cat="boudoir"> 6 </a> | </li>
<li><a href="javascript:void(0);" id="b-7" class="ajaxpaging" title="7" cat="boudoir"> 7 </a> | </li>
<li><a href="javascript:void(0);" id="b-8" class="ajaxpaging" title="8" cat="boudoir"> 8 </a> | </li>
<li><a href="javascript:void(0);" id="b-9" class="ajaxpaging" title="9" cat="boudoir"> 9 </a> | </li>
<li><a href="javascript:void(0);" id="b-10" class="ajaxpaging" title="10" cat="boudoir"> 10 </a> | </li>
</ul>
</div>
<!-- /// end div.paging -->
So page one link at the top has id=1 and page one at the bottom has id=b-1. I believe I need to use .bind() and .trigger() but am unsure of how to set it up/ get started. If someone could point me in the right direction that would be great!
Thanx in advance!
EDIT
////////////////////////////////////////
Problem solved :)