时间戳

首页 > 解决方案 > 使用 javascript/jQuery 更改 % 中设置的 div left 属性？

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

问题描述

希望你能帮我！！所以我在另一个 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>

标签： javascriptjqueryhtmlcss

解决方案

首先，您突出显示的 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>

推荐阅读