更改使用javascript / jQuery在％中设置的div左属性？

Question

Hope you can help me!! So I have a div inside another div and I'd like to move the second one back and forth with a step of 14.5% left and right stopping it before the black edges. I've managed to do it setting the left property in px but I'd like to to that with percentages..how can I do that? Thanks in advance! PS. of course now the code doesn't work well because of the px changing..for this reason I'd like to work with %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

First, your highlighted id is missing " and you're are trying to get your element by calling the id attribute with the class value.

You can get the container width with .width() function, and then calculate the percentage by multiplying it by 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>