Question

我经历了许多链接以获得我的问题的答案，然而，找不到任何如此决定要求它。

我使用canvas html元素来显示活动幻灯片。单击下一个按钮时，活动画布元素边框颜色应该变为正常，下一个画布元素边框颜色应该更改为标识活动。但它不起作用。

这是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>

这是css

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

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

这是脚本

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

canvas中有li个元素，因此您需要编写currentDot.parent().next().find('.dot');而不是currentDot.next() .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>

使用jquery添加和删除canvas类

3 个答案: