Question

希望你能帮助我！因此，我在另一个div内有一个div，我想前后移动14.5％，向左和向右移动第二个，在黑色边缘之前停止它。我设法做到了，以px为单位设置了left属性，但我想用百分比来设置。我该怎么做？提前致谢！ 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缺少"，并且您正在尝试通过使用类值调用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>

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

1 个答案: