如何选择嵌套的元素以通过js动态地改变它

Question

亲爱的Stack溢出的人;我在使用js“on-click”选择“div”时遇到麻烦 this are the divs in question

.mediumSquare {
    height:256px;
    width:50%;
    margin-left: 0px;
    margin-right: 0px;
    float: left;
    background-color: #eee;

    div {
        width: 100px;
        height: 100%;
        float: left;
    }
}

- 这是对有问题的div一般参数进行样式设定的css

- 在这里，我们将有更改动态样式的js，我希望它在点击时选择其中一个框并更改其背景颜色......

function updateTextInput(val, event) {
    console.log(event.currentTarget);
    selector = this;
}

$( document ).ready(function() {
    $('[type="range"]').each(function() {
        colorPalettes(this.id);
    });

    $('.mediumSquare > div').on('click', function(event) {
        console.log(event.currentTarget);
    });
});

这是相关的Html

<div class='colorScope'>
    <div class='mediumSquare'><div id="colorBackgroundDark<%=project.id%>"></div>
        <div id="Dark1<%=project.id%>">
        </div>
        <div id="Dark2<%=project.id%>">
        </div>
    </div>
    <div class='mediumSquare'><div id="colorBackgroundLight<%=project.id%>"></div>
        <div id="Light1<%=project.id%>">
        </div>
        <div id="Light2<%=project.id%>">
        </div>
    </div>
</div>

这是我目前的做法

这是游侠

<input type="range" class="slider" id="<%=project.id%>" min="0" max="16777215" oninput="updateTextInput(this.value,this.id);">

我遇到的另一个问题是，当我专注于游侠时，它会变成当前目标，所以我不能选择一种颜色来改变它与使用js造型的游侠。