javascript - 单击时向图像映射部分添加颜色轮廓(jQuery)

Question

我有一个包含四个部分的图像映射，本质上我想:

1. 点击某个部分后，为所选部分添加颜色轮廓。
2. 单击新部分时，从先前选择的部分中删除轮廓，并将颜色轮廓添加到新部分。

这是我试过的:

在我包含的样式 block 中

.act{
    outline: purple solid thick;
}

然后，jQuery，

$('area').click(function(){

            choice = $(this).attr('alt');
            $('#choice').html(choice);
            $(this).addClass('act');

        });

记住，最后一行会添加类“act”，但不会在单击新部分时删除类。同样，在我看来，$(this).siblings().removeClass('act');应该做那个把戏？？？ 最后，html，

<div class = "container">
    <div class = "row">

        <div class = "col-md-8">

            <img src="plate1.jpg" width="800" height="618" border="0" usemap="#map" />

            <map name="map">
                <area shape="rect" coords="58,26,373,274" alt="1"  nohref="nohref" />
                <area shape="rect" coords="427,28,742,272" alt="2"  nohref="nohref" />
                <area shape="rect" coords="60,325,380,571" alt="3"  nohref="nohref" />
                <area shape="rect" coords="426,325,747,571" alt="4"  nohref="nohref" />
            </map>

        </div>
    </div>
</div>

感谢大家的贡献。最好的问候，

Answer 1

也许这对你有帮助。

Reference