Transfer javascript to jQuery for the carousel

I am trying to convert the JavaScript to jQuery for my carousel.

The code I had is:

document.querySelectorAll('.indicators')[0].style.color = 'red';
document.querySelector('.toggler-prev').style.display = 'none';
document.addEventListener('postchange', function(event){
  document.querySelectorAll('.indicators')[event.lastActiveIndex].style.color = 'white';
  document.querySelectorAll('.indicators')[event.activeIndex].style.color = 'red';
  var togglerPrev = document.querySelector('.toggler-prev');
  var togglerNext = document.querySelector('.toggler-next');
  if (event.activeIndex === 3) {
  togglerPrev.style.display = 'block';
  togglerNext.style.display = 'none';
  } else if (event.activeIndex === 0) {
  togglerNext.style.display = 'block';
  togglerPrev.style.display = 'none';
  } else {
  togglerNext.style.display = 'block';
  togglerPrev.style.display = 'block';
  }
});

Which I transferred to jQuery:

$('.indicators').css('color','#000');
$('.toggler-prev').css('display','none');
$(window).on('postchange', function(event){
  $('.indicators')[event.lastActiveIndex].css('color','#FFF');
  $('.indicators')[event.activeIndex].css('color','#000');
  var togglerPrev = $('.toggler-prev');
  var togglerNext = $('.toggler-next');
  if (event.activeIndex === 3) {
  togglerPrev.css('display','block');
  togglerNext.css('display','none');
  } else if (event.activeIndex === 0) {
  togglerNext.css('display','block');
  togglerPrev.css('display','none');
  } else {
  togglerNext.css('display','block');
  togglerPrev.css('display','block');
  }
});

But it isn't working as I expected for example togglers are not being hidden and color of indicators not being changed.

This is the working JS example: http://codepen.io/anon/pen/eJYWQO

And my jQuery alternative: http://codepen.io/anon/pen/eJYWrq

Can anybody help me with editing my second codepen? Thanks in advance.

Answers


You forgot to mention somewhere that you are using AngularJS and onsenUI ;)

Your problem is, that the jQuery event does not have the properties activeIndex and lastActiveIndex, but they can be found in event.originalEvent.

Also, like @stalin said in his answer, your indicators are no jQuery objects, therefore you can't call the css-function on them. Wrap this stuff in another jQuery constructor like $() or even better, use the eq-function which returns a jQuery wrapped object from an array.

Then, to optimize some of the readability, you might want to consider the hide and show function instead of changing the CSS property display.


All in all your code should look like this

$('.indicators').css('color', '#fff');
$('.indicators').eq(0).css('color', '#000'); // highlight the first indicator
$('.toggler-prev').hide();

$(window).on('postchange', function(event) {

    //store the indices for readability
    var activeIndex = event.originalEvent.activeIndex;
    var lastActiveIndex = event.originalEvent.lastActiveIndex;

    $('.indicators').eq(lastActiveIndex).css('color', '#FFF');
    $('.indicators').eq(activeIndex).css('color', '#000');

    var togglerPrev = $('.toggler-prev');
    var togglerNext = $('.toggler-next');

    if (activeIndex === carousel.getCarouselItemCount() - 1) {
        togglerPrev.show();
        togglerNext.hide();
    } else if (activeIndex === 0) {
        togglerNext.show();
        togglerPrev.hide();
    } else {
        togglerNext.show();
        togglerPrev.show();
    }
});

You have several problems in your implementation

First the event is not trigered in $(window) is in the $(document)

Your variable like lastActiveIndex are not in the event object are in event.originalEvent

$('.indicators')[event.lastActiveIndex] return a dom object not a jquery object you need to wrap this result in a jquery object to use the css() function

After you fix all this your code will work

Sorry that don't have time for create a fiddle for you :)


Need Your Help

Windows Phone 8 Developer Registration Failure

windows-phone-8 device registration

I have been struggling to get my test app work on an actual windows 8 phone.

MATLAB dct2/idct2 vs. dctmtx

matlab dct

There are two alternative methods to compute DCT and its inverse in MATLAB. One is dct2/idct2 and the other is the transformation matrix computed by dctmtx. Why is there an alternative way based on