javascript - 幻灯片中的圆圈不会返回非事件状态

Question

我有以下函数，它根据计数变量更改 slider 中的图片。还将一个圆圈设置为事件状态。现在的问题是，即使图片发生变化，圆圈仍然保持事件状态。我怎样才能使它们再次处于非事件状态，并且只有属于该图片的那个处于事件状态？

function picChange(counter) {

 if (counter == 0) {
        slide.src = "slike/slide_1.png";
        circle1.src = "slike/active.png";
 }

 else if (counter == 1) {
        slide.src = "slike/prva.jpg";
        circle2.src = "slike/active.png";
 }

  else if (counter == 2) {
        slide.src = "slike/slide_1.png";
        circle3.src = "slike/active.png";
 }

   else {
        slide.src = "slike/druga.jpg";
        circle4.src = "slike/active.png";
 }

}

Answer 1

您还可以使用闭包来保存对事件圈的引用。

var picChange = (function () {
    var activeCircle = null;

    return function (counter) {
        activeCircle && activeCircle.src = "slike/inactive.png"; // or ''?

        if (counter == 0) {
            slide.src = "slike/slide_1.png";
            activeCircle = circle1;
        } 

        else if (counter == 1) {
            slide.src = "slike/prva.jpg";
            activeCircle = circle2;
        } 

        else if (counter == 2) {
            slide.src = "slike/slide_1.png";
            activeCircle = circle3;
        }

        else {
            slide.src = "slike/druga.jpg";
            activeCircle = circle4;
        }

        activeCircle.src = "slike/active.png";
    };
})();