javascript - 使用 jquery 添加和删除 Canvas 类

Question

我浏览了很多链接来找到我的问题的答案，但是找不到任何链接，所以决定问一下。

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

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

li 中有 canvas 元素，因此您需要编写 currentDot.parent().next().find('.dot'); 而不是 currentDot.next() .prev()

也是如此