CODEWITHSUNDEEP
jquery
Delto
Delto

Reputation: 331

jQuery - Cycle backwards and forwards through array on click.

I would like the be able to cycle backwards and forward through multiple arrays, I've only been able to make it cycle forward, but not backwards.

Here is where I am so far. (You'll notice the down arrow button is not working)

Any insight would be welcomed!

JS Fiddle

HTML

<div class="container">
<button class="btn-down">v</button>
    CUSTOM HOURS
<button class="btn-up">^</button>
<p class="price-select">1200</p>
<p class="hours-select">3</p>
<p class="photos-select">200-400+</p>
<p class="postproduction-select">15</p>
</div>
<div class="weekend-notice">Note: Weekend bookings available at a minimum of 5 hours.</div>

jQuery

//FOR CUSTOM HOURS BUTTON
var price = ["1400", "1600", "1800", "2000", "2200", "1200"];
var hours = ["4", "5", "6", "7", "10", "3"];
var photos = ["400-600+", "600-800+", "800-1000+", "1000-1200+", "1200-1400+", "200-400+"];
var editing = ["17", "19", "22", "25", "30", "15"];

var i = 0;
$(".btn-up").on('click', function() {
$(".price-select").hide().html(price[i]).fadeIn(300);
$(".hours-select").hide().html(hours[i]).fadeIn(300);
$(".photos-select").hide().html(photos[i]).fadeIn(300);
$(".postproduction-select").hide().html(editing[i]).fadeIn(300);
  i++;
  i = i % 6;

var checkHours = parseInt($('.hours-select').text());
var weekendNotice = $('.weekend-notice');
var hoursNotice = $('.morehours-notice');

if(checkHours <= 4){
    weekendNotice.fadeIn(500);
}else{
    weekendNotice.fadeOut(500);
};

});

Upvotes: 3

Views: 714

Answers (4)

guest271314
guest271314

Reputation: 1

Try utilizing button selector , single click handler increment , decrement i based on e.target of event

// FOR CUSTOM HOURS BUTTON
var price = ["1400", "1600", "1800", "2000", "2200", "1200"];
var hours = ["4", "5", "6", "7", "10", "3"];
var photos = ["400-600+", "600-800+", "800-1000+"
              , "1000-1200+", "1200-1400+", "200-400+"];
var editing = ["17", "19", "22", "25", "30", "15"];

var i = price.length - 1;
$("button").on('click', function(e) {
  if ($(e.target).is(".btn-up")) {
    i = i === price.length - 1 ? 0 : ++i;
  } else {
    if ($(e.target).is(".btn-down")) {
      i = i > 0 ? --i : price.length - 1;
    };
  };
  $(".price-select").hide().html(price[i]).fadeIn(300);
  $(".hours-select").hide().html(hours[i]).fadeIn(300);
  $(".photos-select").hide().html(photos[i]).fadeIn(300);
  $(".postproduction-select").hide().html(editing[i]).fadeIn(300);

  var checkHours = parseInt($('.hours-select').text());
  var weekendNotice = $('.weekend-notice');
  var hoursNotice = $('.morehours-notice');

  if (checkHours <= 4) {
    weekendNotice.fadeIn(500);
  } else {
    weekendNotice.fadeOut(500);
  };

});
p {
  display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<div class="container">
  <button class="btn-down">v</button>CUSTOM HOURS
  <button class="btn-up">^</button>
  <p class="price-select">1200</p>
  <p class="hours-select">3</p>
  <p class="photos-select">200-400+</p>
  <p class="postproduction-select">15</p>
</div>
<div class="weekend-notice">Note: Weekend bookings available at a minimum of 5 hours.</div>

jsfiddle http://jsfiddle.net/4pbq4ddx/14/

Upvotes: 0

Roamer-1888
Roamer-1888

Reputation: 19288

It's possible to calculate the index for the "up" and "down" actions in one line, and coding this can be made easier by first setting data values of 1 and -1 on the up/down buttons.

It is also better practice to initialise via the script rather than hard-code in HTML.

//FOR CUSTOM HOURS BUTTON
var price = ["1400", "1600", "1800", "2000", "2200", "1200"];
var hours = ["4", "5", "6", "7", "10", "3"];
var photos = ["400-600+", "600-800+", "800-1000+", "1000-1200+", "1200-1400+", "200-400+"];
var editing = ["17", "19", "22", "25", "30", "15"];

var i = 0,
    n = hours.length; // 6

$(".btn-up").data('dir', 1);
$(".btn-down").data('dir', -1);

$(".btn-up, .btn-down").on('click', function() {
    // ***** this line handles both directions *****
    i = (i + $(this).data('dir') + n) % n;
    // ***** ********************************* *****
    $(".price-select").hide().html(price[i]).fadeIn(300);
    $(".hours-select").hide().html(hours[i]).fadeIn(300);
    $(".photos-select").hide().html(photos[i]).fadeIn(300);
    $(".postproduction-select").hide().html(editing[i]).fadeIn(300);
    if(parseInt(hours[i]) <= 4) {
        $('.weekend-notice').fadeIn(500);
    } else {
        $('.weekend-notice').fadeOut(500);
    };
});

$(".btn-down").trigger('click'); //initialize

DEMO

Upvotes: 3

Dhiraj
Dhiraj

Reputation: 33618

Start with index = -1 and iterate forward like this

i = (i+1) % (price.length); (I used one of the arrays as a reference for length)

and backward like this 

if (i <= 0) {
    i = price.length - 1;
} else {
    --i;
}

I think it is important where you place them.

var i = -1;
$(".btn-up").on('click', function () {
    i = (i+1) % (price.length);
    $(".price-select").hide().html(price[i]).fadeIn(300);
    $(".hours-select").hide().html(hours[i]).fadeIn(300);
    $(".photos-select").hide().html(photos[i]).fadeIn(300);
    $(".postproduction-select").hide().html(editing[i]).fadeIn(300);

    var checkHours = parseInt($('.hours-select').text());
    var weekendNotice = $('.weekend-notice');
    var hoursNotice = $('.morehours-notice');

    if (checkHours <= 4) {
        weekendNotice.fadeIn(500);
    } else {
        weekendNotice.fadeOut(500);
    };

});
$(".btn-down").on('click', function () {
    if (i <= 0) {
        i = price.length - 1;
    } else {
        --i;
    }
    $(".price-select").hide().html(price[i]).fadeIn(300);
    $(".hours-select").hide().html(hours[i]).fadeIn(300);
    $(".photos-select").hide().html(photos[i]).fadeIn(300);
    $(".postproduction-select").hide().html(editing[i]).fadeIn(300);

    var checkHours = parseInt($('.hours-select').text());
    var weekendNotice = $('.weekend-notice');
    var hoursNotice = $('.morehours-notice');

    if (checkHours <= 4) {
        weekendNotice.fadeIn(500);
    } else {
        weekendNotice.fadeOut(500);
    };

});

Here is a demo http://jsfiddle.net/dhirajbodicherla/4pbq4ddx/10/

Upvotes: 1

Adnan Y
Adnan Y

Reputation: 3230

$(".btn-down").on('click', function() {
  $(".price-select").hide().html(price[i]).fadeIn(300);
  $(".hours-select").hide().html(hours[i]).fadeIn(300);
  $(".photos-select").hide().html(photos[i]).fadeIn(300);
  $(".postproduction-select").hide().html(editing[i]).fadeIn(300);
  if(i == 0) {
      i = 5
  } else {
      i--;
  }

  var checkHours = parseInt($('.hours-select').text());
  var weekendNotice = $('.weekend-notice');
  var hoursNotice = $('.morehours-notice');

  if(checkHours <= 4){
    weekendNotice.fadeIn(500);
  }else{
    weekendNotice.fadeOut(500);
  };
});

Upvotes: 1

Related Questions