Javascript 使用jquery添加和删除画布类

我通过许多链接找到了我的问题的答案，但是，没有找到任何答案，所以我决定问它

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

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

这是剧本

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);

---

在

li

中有

canvas

元素，因此需要编写

currentDot.parent（）.next（）.find（'.dot'）

而不是

currentDot.next（）

这同样适用于

.prev（）

尝试新代码

   $('.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");
    });

---

您需要遍历父元素和下一个元素，代码才能工作

$（文档）.ready（函数（）{
$（'.arrow next'）。单击（函数（）{
var currentDot=$（'.active dot'）.parent（）；
var nextDot=currentDot.next（）.children（'canvas'）；
如果（nextDot.length==0）{
nextDot=$（'.dot'）.first（）；
}
$（'canvas.active-dot'）.removeClass（'active-dot'）；
nextDot.addClass（'active-dot'）；
});
$（'.arrow prev'）。单击（函数（）{
var currentDot=$（'.active dot'）.parent（）；
var prevDot=currentDot.prev（）.children（'canvas'）；
如果（prevDot.length==0）{
prevDot=$（'.dot'）.last（）；
}
$（'canvas.active-dot'）.removeClass（'active-dot'）；
prevDot.addClass（'active-dot'）；
});
});
画布{
边框：2件纯色深蓝；
边界半径：50px；
}
活动点{
边框：2倍纯绿；
边界半径：50px；
}











jquery语法错误即将出现，请尝试使用iThanks。它工作得很好：）。你能确定为什么next不起作用吗。在没有画布的情况下，下一个是完美的
   $('.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");
    });