正在使用javascript/jQuery更改%中设置的div left属性

Question

希望你能帮助我！！因此，我在另一个div中有一个div，我想前后移动第二个div，左右移动14.5%，使其在黑边之前停止。我已经成功地将left属性设置为px，但我希望使用百分比。。我该怎么做？提前感谢！PS。当然，现在由于px的变化，代码不能很好地工作。。出于这个原因，我想与%s合作。。。

$(document).ready(function() {
$('#min_oct').click(function() {
var left = parseFloat($('.highlighted').css('left'));
console.log(left);
if(left<99.495){
$('.highlighted').css('left',left);
}
else{
left= left - 103.108;
$('.highlighted').css('left',left);
}
});
});
$(document).ready(function() {
$('#plus_oct').click(function() {
var left = parseFloat($('.highlighted').css('left'));
console.log(left);
if(left>411.111){
$('#highlighted').css('left',left);
}
else{
left= left +  103.108;
$('#highlighted').css('left',left);
}
});
});

.mini_keyboard{
position: relative;
width: 700px;;
height: 90px;
top: 22.5%;
transform: translate(35%);
border: 0.5rem solid;
box-shadow:
inset 0 0 18rem black,
inset 0 0 4rem black,
0 0 10rem black;
padding: 0.5%;
bottom: 5px;
}
.highlighted{
position: absolute;
background-color: yellow;
width: 198px;;
height: 93px;
left: 57.5%;
top: 0.5%;
opacity: 0.6;
padding: 0.5%;
bottom: 5px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="mini_keyboard">
<div id=highlight class="highlighted"></div>
</div>
<button id="min_oct">-1 octave</button>
<button id="plus_oct">+1 octave</button>

Answer 1

首先，高亮显示的id缺少"，您正试图通过调用具有class值的id属性来获取元素。

您可以使用.width()函数获得容器宽度，然后将其乘以0.145来计算百分比。

$(document).ready(function() {
$('#min_oct').click(function() {
var containerWidth = $(".mini_keyboard").width();
var left = parseFloat($('.highlighted').css('left'));
console.log(left);
var step = (containerWidth * 0.145);
if(left < step){
$('#highlight').css('left',left);
}
else{
left= left - step;
$('#highlight').css('left',left);
}
});
});
$(document).ready(function() {
$('#plus_oct').click(function() {
var containerWidth = $(".mini_keyboard").width();
var left = parseFloat($('.highlighted').css('left'));
console.log(left);
var step = (containerWidth * 0.145);
if(left > (containerWidth - (2*step))){
$('#highlight').css('left',left);
}
else{
left = left + step;
$('#highlight').css('left',left);
}
});
});

.mini_keyboard{
position: relative;
width: 700px;;
height: 90px;
top: 22.5%;
transform: translate(35%);
border: 0.5rem solid;
box-shadow:
inset 0 0 18rem black,
inset 0 0 4rem black,
0 0 10rem black;
padding: 0.5%;
bottom: 5px;
}
.highlighted{
position: absolute;
background-color: yellow;
width: 198px;;
height: 93px;
left: 57.5%;
top: 0.5%;
opacity: 0.6;
padding: 0.5%;
bottom: 5px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="mini_keyboard">
<div id="highlight" class="highlighted"></div>
</div>
<button id="min_oct">-1 octave</button>
<button id="plus_oct">+1 octave</button>