更改父Div背景onclick从多个子Div中

Question

我正在尝试使用多个li实例使父div背景img更改onclick。 每个李应将背景更改为该状态的地图。 我成功地做到了这一点

这有效：

        <ul>
            <li><div class="panel-heading" role="tab" id="stateNine">
                <h3 class="panel-title"> <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion3" href="#stateal" aria-expanded="false" aria-controls="stateal">Alabama | </h3></div>
                </li>
                <script>function changeBackground() {
                        event.currentTarget.className = ('bucketal');
                }</script>`

这一次起作用，它将在每个按钮上触发最后一个脚本实例，而忽略前一个。 背景更改，但仅更改为最后一个实例的背景。 共有9个不同实例的总数。 （显示3）

<div onclick="changeBackground(this)" class="bucket2"> 
        <div class="locations">
    <div class="panel-group" id="accordion3" role="tablist" aria-multiselectable="true">
        <div class="panel panel-default loc" style="background-color;none;">

        <ul>
            <li><div class="panel-heading" role="tab" id="stateNine">
                <h3 class="panel-title"> <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion3" href="#stateal" aria-expanded="false" aria-controls="stateal">Alabama | </h3></div>
                </li>
                <script>function changeBackground() {
                        event.currentTarget.className = ('bucketal');
                }</script>
            <li><div class="panel-heading" role="tab" id="stateEight">
                <h3 class="panel-title"> <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion3" href="#statefl" aria-expanded="false" aria-controls="statefl">Florida | </h3></div>
                <script>function changeBackground() {
                        event.currentTarget.className = ('bucketfl');
                }</script></li>
            <li><div class="panel-heading" role="tab" id="stateSeven">
                <h3 class="panel-title"> <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion3" href="#statega" aria-expanded="false" aria-controls="statega">Georgia | </h3></div>
                <script>function changeBackground() {
                        event.currentTarget.className = ('bucketga');
                }</script></li></li>

这里有很多不错的帖子，但是我没有找到多个实例的答案。 如果我错过了，我深表歉意。 我很欣赏我可能没有遵循内联HTML / JS实例的最佳做法，并且对最佳/新解决方案持开放态度。

Answer 1

<div id="changeBackground">
    <button data-class="red">
    Red
    </button>
     <button data-class="blue">
    blue
    </button>
     <button data-class="green">
    green
    </button>
</div>

JS

var el = document.getElementById("changeBackground");
el.addEventListener("click", changeBackground);
function changeBackground(e) {
        e.currentTarget.className = e.target.getAttribute('data-class');
}

CSS：

.red {
  background-color: red;
}
.green {
  background-color: green;
}
.blue {
  background-color: blue;
}

https://jsfiddle.net/ye7dy58y/