Adding and removing a canvas class using jquery

Question

I looked through many links to get an answer to my problem, but I could not find a solution that so decided to ask.

I am using the html canvas element to display the active slide. when you click the next button, the active border color of the canvas element should become normal, and the next color of the canvas element border should change to identify the active. But it does not work.

This is HTML

<div class="slider-nav">
    <a href="#" class="arrow-prev"><img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/arrow-prev.png" /></a>
    <ul class="slider-dots">
        <li><canvas class="dot active-dot" width="50" height="10"></canvas></li>
        <li><canvas class="dot" width="50" height="10"></canvas></li>
        <li><canvas class="dot" width="50" height="10"></canvas></li>
        <li><canvas class="dot" width="50" height="10"></canvas></li>
    </ul>
    <a href="#" class="arrow-next"><img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/arrow-next.png" /></a>
</div>

This is css

canvas {
    border:2px solid deepskyblue;
    border-radius: 50px;
}

canvas.active-dot {
    border:2px solid green;
    border-radius: 50px;
}

This is a script

var main = function() {
    $('.arrow-next').click(function() {
        /*var canvas = document.getElementsByClassName('dot');
        var context = canvas.getContext('2d');
        context.fillStyle = '#8ED6FF';*/
        var currentDot = $('.active-dot');
        var nextDot = currentDot.next();

        if(nextDot.length === 0) {
            nextDot = $('.dot').first();
        }
        $('active-dot').removeClass('active-dot');
        /*currentDot.removeClass('active-dot');
        nextDot.addClass('active-dot');*/
        $(this).next().addClass('active-dot');
    });

    $('.arrow-prev').click(function() {

        var currentDot = $('.active-dot');
        var prevDot = currentDot.prev();

        if(prevDot.length === 0) {
            prevDot = $('.dot').last();
        }
        currentDot.removeClass('active-dot');
        prevDot.addClass('active-dot');
    });    
};

$(document).ready(main);

Answer 1

You have canvaselements in li, so you need to write currentDot.parent().next().find('.dot');instead. currentDot.next() The same applies to.prev()

Answer 2

   $('.arrow-next').click(function() {
       var pos = $(".dot").index($('.active-dot'));
       $(".dot").removeClass("active-dot");
       $(".dot").eq(pos+1).addClass("active-dot");
       if(!$(".dot").hasClass("active-dot")){
          $(".dot").eq(0).addClass("active-dot");
       }
 });


    $('.arrow-prev').click(function() {

       var pos = $(".dot").index($('.active-dot'));
       $(".dot").removeClass("active-dot");
       $(".dot").eq(pos-1).addClass("active-dot");
    });

Fiddle

Answer 3

.

$(document).ready(function() {
  $('.arrow-next').click(function() {

    var currentDot = $('.active-dot').parent();
    var nextDot = currentDot.next().children('canvas');

    if (nextDot.length === 0) {
      nextDot = $('.dot').first();
    }
    $('canvas.active-dot').removeClass('active-dot');
    nextDot.addClass('active-dot');
  });

  $('.arrow-prev').click(function() {

    var currentDot = $('.active-dot').parent();
    var prevDot = currentDot.prev().children('canvas');

    if (prevDot.length === 0) {
      prevDot = $('.dot').last();
    }
    $('canvas.active-dot').removeClass('active-dot');
    prevDot.addClass('active-dot');
  });
});

canvas {
  border: 2px solid deepskyblue;
  border-radius: 50px;
}
canvas.active-dot {
  border: 2px solid green;
  border-radius: 50px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="slider-nav">
  <a href="#" class="arrow-prev">
    <img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/arrow-prev.png" />
  </a>
  <ul class="slider-dots">
    <li>
      <canvas class="dot active-dot" width="50" height="10"></canvas>
    </li>
    <li>
      <canvas class="dot" width="50" height="10"></canvas>
    </li>
    <li>
      <canvas class="dot" width="50" height="10"></canvas>
    </li>
    <li>
      <canvas class="dot" width="50" height="10"></canvas>
    </li>
  </ul>
  <a href="#" class="arrow-next">
    <img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/arrow-next.png" />
  </a>
</div>

Hide result