Javascript 单击div时的简明突出显示功能？

今天的难题：

function choice1 () {
        if ($('div[id^="highlight1"]').hasClass('highlight')) {
            $('div[id^="highlight1"]').removeClass('highlight');
        } else {
            $('div[id^="highlight1"]').addClass('highlight');
        }
}

<div id="choice1A" class="click1A"></div>
<div id="choice1B" class="click1B"></div>
<img src="../../../../images/chapter_5/CH5L4_21.png" width="276" height="147"/>
<div id="highlight1A" class="click1A"></div>
<div id="highlight1B" class="click1B"></div>

我正在尝试创建一个函数，其中图像下方的div

highlight1A，highlight1B

获得一个类

。单击图像上相应的div
choice1A，choice1B
时高亮显示。因此，当单击
choice1A
时，
highlight1A
将突出显示。像这样：


但发生的事情是，当我单击一个选项时，它会高亮显示图像后面的两个div


我正在尝试为这个练习获取最简洁的函数，因为我还将把它应用到有更多
选择
div和更多
突出显示
div的练习中。我想使用它，这样就不必对
.js
文件进行太多编辑。我希望能够专注于编辑
HTML
，因此我所要做的就是根据以下练习需要多少div，从源文件中添加/减去div

Javascript:

function choice1 () {
        if ($('div[id^="highlight1"]').hasClass('highlight')) {
            $('div[id^="highlight1"]').removeClass('highlight');
        } else {
            $('div[id^="highlight1"]').addClass('highlight');
        }
}

<div id="choice1A" class="click1A"></div>
<div id="choice1B" class="click1B"></div>
<img src="../../../../images/chapter_5/CH5L4_21.png" width="276" height="147"/>
<div id="highlight1A" class="click1A"></div>
<div id="highlight1B" class="click1B"></div>

HTML:

function choice1 () {
        if ($('div[id^="highlight1"]').hasClass('highlight')) {
            $('div[id^="highlight1"]').removeClass('highlight');
        } else {
            $('div[id^="highlight1"]').addClass('highlight');
        }
}

<div id="choice1A" class="click1A"></div>
<div id="choice1B" class="click1B"></div>
<img src="../../../../images/chapter_5/CH5L4_21.png" width="276" height="147"/>
<div id="highlight1A" class="click1A"></div>
<div id="highlight1B" class="click1B"></div>



此外，如果您慷慨的程序员愿意为您提供的代码提供一些解释，我将不胜感激，因为我也希望扩展我对JavaScript和jQuery的知识

非常感谢你
 我不知道你这样处理问题是否有原因，如果有，请评论，我将编辑我的答案

但解决这个问题最简单的方法其实并不苛刻

您需要做的是：

在你的图像周围有一个容器元素
绑定
单击容器元素上的
事件，并使用
就这样。事件处理程序即使在单击图像而不是容器时也会工作，原因是

HTML
您的HTML可能如下所示：

<div class="container"><img src="http://www.example.com/image.png"></div>
<div class="container"><img src="http://www.example.com/image.png"></div>

JS
您可以使用
toggleClass
方法。
choice如何调用1
如果你是一个很好的HTML相关问题提问者，你会提供一些答案，这样答案会更容易深入你的问题，当然他们会更快地给出答案。问题是
$（'div[id^=“highlight1]”）。addClass（'highlight'）
将class
高亮显示
添加到id以
highlight1
开头的所有元素，而不是只针对
highlight1A
或
highlight1B
-要知道必须高亮显示哪一个，我们需要知道单击了哪个选项。。这里少了什么