Jquery - 将链接颜色与显示的图像匹配

Question

我有一个底部有3个圆圈的滑块，当显示图片时，正确的圆形背景必须变为绿色，与正确的图像相关。我已经开始工作了，但是当用户点击一个新的圆圈时，要更改图像，旧的背景颜色仍然存在并且不会消失，正如您从图片示例中看到的那样。

在上面的示例中，加载了middel图像的页面突出显示，当用户点击右侧圆圈时图像发生变化，并突出显示右侧圆圈（应该如此）但是中间按钮高亮显示颜色仍然存在...我在这儿失踪了？代码如下：

$(document).ready(function(){
    $("a").click(function(){
      $("iLink").removeClass()
        $(this).addClass("over")  
    }) ; 
});

.over {
    background:#008000;
}

<a href="#" id="l1" class="iLink1"  onclick="imgSliderL1()"><img id="i1" src="images/dot.png"/></a>
     <a href="#" id="l2" class="iLink2" onclick="imgSliderL2()"><img id="i2" src="images/dot.png" /></a>
     <a href="#" id="l3" class="iLink3" onclick="imgSliderL3()"><img id="i3" src="images/dot.png" /></a>

Answer 1

什么是iLink？

$("iLink").removeClass()

更改为

 $('a').removeClass()

为什么需要不同的课程？

Answer 2

选择id和关联条件，选择一个id，而不是使用jquery或css函数的css属性。

Answer 3

更改

$("iLink").removeClass()

到

$("a[class^='iLink']").removeClass()

因为a标签包含不同的类，但它们都以相同的名称iLink

开头