Question

I have a jquery content slider I built from scratch with a ‘previous’ and a ‘next’ button and paging.

How do I implement an incremental code so that every time I click ‘next’, the class of my selector element class changes to .no2, .no3 and so forth before starting the cycle again once it reaches .no7?

I obviously would like the previous button to achieve the same effect in reverse.

(visually what’s happening is dot.png moves along a timeline as you click the ‘next’ button, creating a paging effect)

.no1{
    background:url(../images/slide6/dot.png), url(../images/slide6/timeline.png);background-position:8px 53px,left bottom; background-repeat:no-repeat;"}

.no2{
background:url(../images/slide6/dot.png), url(../images/slide6/timeline.png);background-position:81px 53px,left bottom ; background-repeat:no-repeat;"}

.no3{
background:url(../images/slide6/dot.png), url(../images/slide6/timeline.png);background-position:154px 53px,left bottom ; background-repeat:no-repeat;"}

.no4{
background:url(../images/slide6/dot.png), url(../images/slide6/timeline.png);background-position:227px 53px,left bottom ; background-repeat:no-repeat;"}

.no5{
background:url(../images/slide6/dot.png), url(../images/slide6/timeline.png);background-position:300px 53px,left bottom ; background-repeat:no-repeat;"}

.no6{
background:url(../images/slide6/dot.png), url(../images/slide6/timeline.png);background-position:373px 53px,left bottom ; background-repeat:no-repeat;"}

.no7{
background:url(../images/slide6/dot.png), url(../images/slide6/timeline.png);background-position:446px 53px,left bottom ; background-repeat:no-repeat;"}

Answer 1

If noN is the only class on that element, it’s more-o-less trivial:

$('.next').click(function() {
  var $el = $('#someElement'),  
      elClass = $el.attr('class'),
      parts = elClass.match(/(no)([1-7])/);
  if (parts[2] === '7') {
    parts[2] = 1;
  }
  else {
    parts[2]++;
  }
  $el.removeClass(elClass).addClass(parts[1] + parts[2]);
});

Here .next refers to that next button of yours, and #someElement – to the element class of which you want to cycle.