更新

Question

好的，这可能是一个挑战（不仅是实际问题，还要描述它！）。

所以我有两个坦克，使用css设计：

      TANK 1                TANK 2  
     +-------+  /\         +-------+
     |40%    |  ||         |40%    |     FROM:_________\/
     |       |  ||         |       |
     |       | 500px       |       |     TO:___________\/
  |  |WWWWWWW|  ||         |WWWWWWW|
XOne |       |  ||         |       |     AMOUNT:__________
  |  +-------+  \/         +-------+     Transfer


XOne: the height (in px) of the current level of tank 1
XTwo: the same, but for tank 2

the 500px height stays the same throughout.

我的总体目标是移动一些“输入”字样。从第一个到第二个坦克的数量（反之亦然，但此时我们已经领先于自己）。

在坦克1中，我给出了8000的数据属性，这是指该坦克的容量。在坦克2中，我也做了同样的事情，但是给它7500。

因此坦克1的高度为500px（代表8000L），坦克2也是500px，但代表7500L。

坦克1：命名约定设计

             +-----------------------------------+
             | 40%  <TOne>                       |   /\
             |                                   |   ||
             |                                   |   ||
             |                                   |   ||
             |                                   |   ||
             |                                   |   ||
             |                                   |   ||
             |                                   |  500px <YOne>
             |                                   |   ||
             |                                   |   ||  - (represents 8000 L)
             |                                   |   ||     <LOne>
             |                                   |   ||
        /\   |WWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWW|   ||
        ||   |                                   |   ||
      <XOne> |                                   |   ||
        ||   |                                   |   \/
        \/   +-----------------------------------+

这也可以在坦克2中复制

然而，这并不像听起来那么简单。你知道，你必须确保你有足够的液体从罐1中移除，以及足够的空间左在罐2中。

我正在编辑＆＃39;级别＆＃39;使用盒子阴影属性的液体。

我最初有一个嵌套if语句的想法，但我似乎无法正确实现这一点（请参阅代码段）。

我还必须实施一项工作来提取＆＃39;当前的盒子阴影展开（代表液体，见my previous question）。

非常感谢任何帮助。（我会根据要求进一步澄清）。

更新

我已经测试了“创造”＆＃39;价值观，他们是正确的。

＆＃13;

 $(document).ready(function() {
   $('#submitChanges').click(function() {



     var a = $('#firstTank').val(); //values from combo boxes
     var b = $('#secondTank').val();
     var c = parseInt($('#amount').val()); //amount to transfer

     var TOne = parseInt($('#tankPercentageFrom').text());
     var TTwo = parseInt($('#tankPercentageTo').text());
     var YOne = 500;
     var YTwo = 500;
     LOne = parseInt($('#tankPercentageFrom').attr("data-tonneValue"));
     var LTwo = parseInt($('#tankPercentageTo').attr("data-tonneValue"));

     var XOne = $('#tankPercentageFrom').parent().css("box-shadow");
     var x = XOne.slice(-1);
     if (x == 't') {
       XOne = XOne.split(" ")[4];

     } else {
       XOne = XOne.split(" ")[2];

     }
     XOne = parseInt(XOne.substring(1));

     var XTwo = $('#tankPercentageTo').parent().css("box-shadow");
     var x = XTwo.slice(-1);
     if (x == 't') {
       XTwo = XTwo.split(" ")[4];

     } else {
       XTwo = XTwo.split(" ")[2];

     }
     XTwo = parseInt(XTwo.substring(1));

     /***********************************************************/
     if ((TOne / 100) * LOne >= c) {
       if (((TTwo / 100) * LTwo + c) < LTwo) {
         var newXOne = parseInt((((c / LOne) * LOne) / 100) * YOne);
         var newXTwo = parseInt(XTwo - ((c / LTwo) * 100) * YTwo);

         //set the two values
         $('#tankPercentageFrom').parent().css("box-shadow", "rgb(56, 56, 56) 0px -" + newXOne + "px 0px -2px inset");
         $('#tankPercentageTo').parent().css("box-shadow", "rgb(56, 56, 56) 0px -" + newXTwo + "px 0px -2px inset");

       }
     }




   });
 });

＆＃13;

 .loadingTank {
   display: inline-block;
   border: 2px solid black;
   margin: 15px;
   max-width: 350px;
   height: 500px;
   width: 30%;
   background-color: #808080;
   box-shadow: rgb(56, 56, 56) 0px -200px 0px -2px inset;
   /*Change this value for leveling*/
   float: left;
   position: relative;
   border-radius: 2%;
 }
 .loadingTank:before {
   content: "";
   width: 70%;
   height: 100%;
   float: left;
   background: -moz-linear-gradient(left, rgba(0, 0, 0, 0.4) 0%, rgba(208, 208, 208, 0) 100%);
   background: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(0, 0, 0, 0.4)), color-stop(100%, rgba(208, 208, 208, 0)));
   background: -webkit-linear-gradient(left, rgba(0, 0, 0, 0.4) 0%, rgba(208, 208, 208, 0) 100%);
   background: -o-linear-gradient(left, rgba(0, 0, 0, 0.4) 0%, rgba(208, 208, 208, 0) 100%);
   background: -ms-linear-gradient(left, rgba(0, 0, 0, 0.4) 0%, rgba(208, 208, 208, 0) 100%);
   background: linear-gradient(to right, rgba(0, 0, 0, 0.4) 0%, rgba(208, 208, 208, 0) 100%);
   filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#66000000', endColorstr='#00d0d0d0', GradientType=1);
 }
 .loadingTank:after {
   /*idea is for this to be the 'leveling'*/
   content: "";
   width: 10%;
   height: 100%;
   border-radius: 10px;
   border: 2px solid black;
   background-color: lightGray;
   margin-right: 10%;
   float: right;
   font-size: 100%;
   background: rgb(0, 0, 0);
   background: -moz-linear-gradient(top, rgba(0, 0, 0, 1) 0%, rgba(128, 128, 128, 1) 1%, rgba(128, 128, 128, 1) 9%, rgba(0, 0, 0, 1) 10%, rgba(128, 128, 128, 1) 11%, rgba(128, 128, 128, 1) 19%, rgba(0, 0, 0, 1) 20%, rgba(128, 128, 128, 1) 21%, rgba(128, 128, 128, 1) 29%, rgba(0, 0, 0, 1) 30%, rgba(128, 128, 128, 1) 31%, rgba(128, 128, 128, 1) 39%, rgba(0, 0, 0, 1) 40%, rgba(128, 128, 128, 1) 41%, rgba(128, 128, 128, 1) 49%, rgba(0, 0, 0, 1) 50%, rgba(128, 128, 128, 1) 51%, rgba(128, 128, 128, 1) 59%, rgba(0, 0, 0, 1) 60%, rgba(128, 128, 128, 1) 61%, rgba(128, 128, 128, 1) 69%, rgba(0, 0, 0, 1) 70%, rgba(128, 128, 128, 1) 71%, rgba(128, 128, 128, 1) 79%, rgba(0, 0, 0, 1) 80%, rgba(128, 128, 128, 1) 81%, rgba(128, 128, 128, 1) 89%, rgba(0, 0, 0, 1) 90%, rgba(128, 128, 128, 1) 91%, rgba(128, 128, 128, 1) 99%, rgba(0, 0, 0, 1) 100%);
   background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0, 0, 0, 1)), color-stop(1%, rgba(128, 128, 128, 1)), color-stop(9%, rgba(128, 128, 128, 1)), color-stop(10%, rgba(0, 0, 0, 1)), color-stop(11%, rgba(128, 128, 128, 1)), color-stop(19%, rgba(128, 128, 128, 1)), color-stop(20%, rgba(0, 0, 0, 1)), color-stop(21%, rgba(128, 128, 128, 1)), color-stop(29%, rgba(128, 128, 128, 1)), color-stop(30%, rgba(0, 0, 0, 1)), color-stop(31%, rgba(128, 128, 128, 1)), color-stop(39%, rgba(128, 128, 128, 1)), color-stop(40%, rgba(0, 0, 0, 1)), color-stop(41%, rgba(128, 128, 128, 1)), color-stop(49%, rgba(128, 128, 128, 1)), color-stop(50%, rgba(0, 0, 0, 1)), color-stop(51%, rgba(128, 128, 128, 1)), color-stop(59%, rgba(128, 128, 128, 1)), color-stop(60%, rgba(0, 0, 0, 1)), color-stop(61%, rgba(128, 128, 128, 1)), color-stop(69%, rgba(128, 128, 128, 1)), color-stop(70%, rgba(0, 0, 0, 1)), color-stop(71%, rgba(128, 128, 128, 1)), color-stop(79%, rgba(128, 128, 128, 1)), color-stop(80%, rgba(0, 0, 0, 1)), color-stop(81%, rgba(128, 128, 128, 1)), color-stop(89%, rgba(128, 128, 128, 1)), color-stop(90%, rgba(0, 0, 0, 1)), color-stop(91%, rgba(128, 128, 128, 1)), color-stop(99%, rgba(128, 128, 128, 1)), color-stop(100%, rgba(0, 0, 0, 1)));
   background: -webkit-linear-gradient(top, rgba(0, 0, 0, 1) 0%, rgba(128, 128, 128, 1) 1%, rgba(128, 128, 128, 1) 9%, rgba(0, 0, 0, 1) 10%, rgba(128, 128, 128, 1) 11%, rgba(128, 128, 128, 1) 19%, rgba(0, 0, 0, 1) 20%, rgba(128, 128, 128, 1) 21%, rgba(128, 128, 128, 1) 29%, rgba(0, 0, 0, 1) 30%, rgba(128, 128, 128, 1) 31%, rgba(128, 128, 128, 1) 39%, rgba(0, 0, 0, 1) 40%, rgba(128, 128, 128, 1) 41%, rgba(128, 128, 128, 1) 49%, rgba(0, 0, 0, 1) 50%, rgba(128, 128, 128, 1) 51%, rgba(128, 128, 128, 1) 59%, rgba(0, 0, 0, 1) 60%, rgba(128, 128, 128, 1) 61%, rgba(128, 128, 128, 1) 69%, rgba(0, 0, 0, 1) 70%, rgba(128, 128, 128, 1) 71%, rgba(128, 128, 128, 1) 79%, rgba(0, 0, 0, 1) 80%, rgba(128, 128, 128, 1) 81%, rgba(128, 128, 128, 1) 89%, rgba(0, 0, 0, 1) 90%, rgba(128, 128, 128, 1) 91%, rgba(128, 128, 128, 1) 99%, rgba(0, 0, 0, 1) 100%);
   background: -o-linear-gradient(top, rgba(0, 0, 0, 1) 0%, rgba(128, 128, 128, 1) 1%, rgba(128, 128, 128, 1) 9%, rgba(0, 0, 0, 1) 10%, rgba(128, 128, 128, 1) 11%, rgba(128, 128, 128, 1) 19%, rgba(0, 0, 0, 1) 20%, rgba(128, 128, 128, 1) 21%, rgba(128, 128, 128, 1) 29%, rgba(0, 0, 0, 1) 30%, rgba(128, 128, 128, 1) 31%, rgba(128, 128, 128, 1) 39%, rgba(0, 0, 0, 1) 40%, rgba(128, 128, 128, 1) 41%, rgba(128, 128, 128, 1) 49%, rgba(0, 0, 0, 1) 50%, rgba(128, 128, 128, 1) 51%, rgba(128, 128, 128, 1) 59%, rgba(0, 0, 0, 1) 60%, rgba(128, 128, 128, 1) 61%, rgba(128, 128, 128, 1) 69%, rgba(0, 0, 0, 1) 70%, rgba(128, 128, 128, 1) 71%, rgba(128, 128, 128, 1) 79%, rgba(0, 0, 0, 1) 80%, rgba(128, 128, 128, 1) 81%, rgba(128, 128, 128, 1) 89%, rgba(0, 0, 0, 1) 90%, rgba(128, 128, 128, 1) 91%, rgba(128, 128, 128, 1) 99%, rgba(0, 0, 0, 1) 100%);
   background: -ms-linear-gradient(top, rgba(0, 0, 0, 1) 0%, rgba(128, 128, 128, 1) 1%, rgba(128, 128, 128, 1) 9%, rgba(0, 0, 0, 1) 10%, rgba(128, 128, 128, 1) 11%, rgba(128, 128, 128, 1) 19%, rgba(0, 0, 0, 1) 20%, rgba(128, 128, 128, 1) 21%, rgba(128, 128, 128, 1) 29%, rgba(0, 0, 0, 1) 30%, rgba(128, 128, 128, 1) 31%, rgba(128, 128, 128, 1) 39%, rgba(0, 0, 0, 1) 40%, rgba(128, 128, 128, 1) 41%, rgba(128, 128, 128, 1) 49%, rgba(0, 0, 0, 1) 50%, rgba(128, 128, 128, 1) 51%, rgba(128, 128, 128, 1) 59%, rgba(0, 0, 0, 1) 60%, rgba(128, 128, 128, 1) 61%, rgba(128, 128, 128, 1) 69%, rgba(0, 0, 0, 1) 70%, rgba(128, 128, 128, 1) 71%, rgba(128, 128, 128, 1) 79%, rgba(0, 0, 0, 1) 80%, rgba(128, 128, 128, 1) 81%, rgba(128, 128, 128, 1) 89%, rgba(0, 0, 0, 1) 90%, rgba(128, 128, 128, 1) 91%, rgba(128, 128, 128, 1) 99%, rgba(0, 0, 0, 1) 100%);
   background: linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(128, 128, 128, 1) 1%, rgba(128, 128, 128, 1) 9%, rgba(0, 0, 0, 1) 10%, rgba(128, 128, 128, 1) 11%, rgba(128, 128, 128, 1) 19%, rgba(0, 0, 0, 1) 20%, rgba(128, 128, 128, 1) 21%, rgba(128, 128, 128, 1) 29%, rgba(0, 0, 0, 1) 30%, rgba(128, 128, 128, 1) 31%, rgba(128, 128, 128, 1) 39%, rgba(0, 0, 0, 1) 40%, rgba(128, 128, 128, 1) 41%, rgba(128, 128, 128, 1) 49%, rgba(0, 0, 0, 1) 50%, rgba(128, 128, 128, 1) 51%, rgba(128, 128, 128, 1) 59%, rgba(0, 0, 0, 1) 60%, rgba(128, 128, 128, 1) 61%, rgba(128, 128, 128, 1) 69%, rgba(0, 0, 0, 1) 70%, rgba(128, 128, 128, 1) 71%, rgba(128, 128, 128, 1) 79%, rgba(0, 0, 0, 1) 80%, rgba(128, 128, 128, 1) 81%, rgba(128, 128, 128, 1) 89%, rgba(0, 0, 0, 1) 90%, rgba(128, 128, 128, 1) 91%, rgba(128, 128, 128, 1) 99%, rgba(0, 0, 0, 1) 100%);
   filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#000000', GradientType=0);
 }
 .Loading-wrapper {
   padding: 5px;
   margin: 5px;
 }
 .loading-text {
   float: left;
   width: 25%;
   padding-top: 100px;
   display: inline-block;
 }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="loadingTank">
  <div id="tankPercentageFrom" data-tonneValue="8000" style="position:absolute; font-size:x-large; color:white;">
    40%
  </div>
</div>
<div class="loadingTank">
  <div id="tankPercentageTo" data-tonneValue="7500" style="position:absolute; font-size:x-large; color:white;">
    40%
  </div>
</div>


<div id="contentPanel" class="k-header" style="width:25%; float:left">
  <h3>TRANSER</h3>
  <hr />
  <br />From:
  <br />
  <select id="firstTank">
    <option selected="">Tank 1</option>
    <option>Tank 2</option>
  </select>
  <br />Amount:
  <br />
  <input type="number" id="amount" placeholder="Enter Tonne here" class="k-textbox" />
  <br />To:
  <br />
  <select id="secondTank">
    <option>Tank 1</option>
    <option selected="">Tank 2</option>
  </select>
  <button class="k-button" id="submitChanges">Transfer</button>
</div>

＆＃13;

或查看JsFiddle

这部分是错误的（计算正在发生的地方）：

    /****************************ACTUAL calcs*******************************/
    if((TOne/100)* LOne >= c)
    {
        if(((TTwo/100)*LTwo +c)< LTwo)
        {
            var newXOne = parseInt((((c/LOne)*LOne)/100) * YOne);
            var newXTwo = parseInt(XTwo - ((c / LTwo) * 100) * YTwo);

            //set the two values 
            $('#tankPercentageFrom').parent().css("box-shadow", "rgb(56, 56, 56) 0px -" + newXOne + "px 0px -2px inset");
            $('#tankPercentageTo').parent().css("box-shadow", "rgb(56, 56, 56) 0px -" + newXTwo + "px 0px -2px inset");

        }
    }

所以从本质上讲，我希望/需要帮助实施：

if( (enough left in tank 1) AND (enough room in tank 2))
      SET XOne; //box shadow of tank 1
      SET XTwo; //box shadow of tank 2
      SET TOne; //text % of tank 1 
      SET TTwo; // text % of tank 2
      CLEAR c;  //the 'amount' textbox

我目前的实施＆＃39;休息＆＃39;至少在您输入＆lt; 15 updated fiddle

时

Answer 1

我为此写了一个新的逻辑。看看这个fiddle

这个逻辑取决于两个数据属性。它们是data-tonneValue="8000"和data-currentval="0"所以一定要将一些整数数据放入这些属性

最终 html 看起来像

<div class="loadingTank">
    <div id="tankPercentageFrom" data-tonneValue="8000" data-currentval="5000" style="position:absolute; font-size:x-large; color:white;">40%</div>
</div>
<div class="loadingTank">
    <div id="tankPercentageTo" data-tonneValue="7500" data-currentval="0" style="position:absolute; font-size:x-large; color:white;">40%</div>
</div>
<div id="contentPanel" class="k-header" style="width:25%; float:left">
     <h3>TRANSER</h3>

    <hr />
    <br />From:
    <br />
    <select id="firstTank">
        <option selected="" value="1">Tank 1</option>
        <option value="2">Tank 2</option>
    </select>
    <br />Amount:
    <br />
    <input type="number" id="amount" placeholder="Enter Tonne here" class="k-textbox" />
    <br />To:
    <br />
    <select id="secondTank">
        <option value="1">Tank 1</option>
        <option selected="" value="2">Tank 2</option>
    </select>
    <button class="k-button" id="submitChanges">Transfer</button>
</div>

<强>的jQuery

$(document).ready(function () {
    $('#submitChanges').click(function () {
        var from = $('#firstTank').val();
        var to = $('#secondTank').val();
        var transferAmount = parseInt($('#amount').val(),10);
        var $tanks = $('.loadingTank').find('div'); // This has both the tanks
        var fromTank = $tanks.eq(from - 1);
        var toTank = $tanks.eq(to - 1);
        var fromMaxCap = parseInt(fromTank.data('tonnevalue'),10);
        var toMaxCap = parseInt(toTank.data('tonnevalue'),10);
        var fromCurVal = parseInt(fromTank.data('currentval'),10);
        var toCurVal = parseInt(toTank.data('currentval'),10);
        if (from != to && transferAmount > 0) {
            if (fromCurVal >= transferAmount && (toMaxCap - toCurVal) >= transferAmount) {
                var newFromCurVal = fromCurVal - transferAmount;
                var newToCurVal = toCurVal + transferAmount;
                fromTank.data('currentval', newFromCurVal);
                toTank.data('currentval', newToCurVal);
                fromCurVal = newFromCurVal;
                toCurVal = newToCurVal;
            } 
            else {
                alert("Cmon.!! you can't do that ");
            }
        }
        var fromTankHeight = fromTank.parent().height(); 
        var toTankHeight = toTank.parent().height(); 
        var fromFillPercentage = ((fromCurVal * 100) / (fromMaxCap));
        var toFillPercentage = ((toCurVal * 100) / (toMaxCap));
        var finalFromTankData = (fromTankHeight / 100) * fromFillPercentage;
        var finalToTankData = (toTankHeight / 100) * toFillPercentage;
        fromTank.parent().css("box-shadow", "rgb(56, 56, 56) 0px -" + finalFromTankData + "px 0px -2px inset");
        fromTank.html((Math.round(fromFillPercentage * 100) / 100)  + "%");
        toTank.parent().css("box-shadow", "rgb(56, 56, 56) 0px -" + finalToTankData + "px 0px -2px inset");
        toTank.html((Math.round(toFillPercentage * 100) / 100) + "%");
    }).trigger('click');
});

Answer 2

请注意，这可以用更清晰的方式编写（添加动画）：

var tank = {};

function calc(tankStr) {
  var tankEl = $('#' + tankStr),
    max = tankEl.data('max'),
    fill = tankEl.data('fill');
  tank[tankStr] = {
    max: max,
    fill: fill
  };
  tankEl.children('.fill').height(tankEl.height() * (fill / max));


}

function balance() {
  calc('tank1');
  calc('tank2');
}

$('button').on('click', function() {
  var amount = parseInt($('input').val()),
    src,
    tgt;
  if ($('select').val() == 1) {
    src = $('#tank1');
    tgt = $('#tank2');
  } else {
    src = $('#tank2');
    tgt = $('#tank1');
  }
  var max = parseInt(tgt.data('max')),
    fill = parseInt(tgt.data('fill'));

  if (amount <= parseInt(src.data('fill')) && amount > 0 && max >= (fill + amount)) {
    tgt.data('fill', fill + amount);
    console.log(src, fill - amount);
    src.data('fill', parseInt(src.data('fill')) - amount);
    balance();
  }

});
balance();

.tanks {
  overflow: hidden;
}
.container {
  float: left;
  height: 300px;
  width: 100px;
  border: 1px solid;
  position: relative;
}
.fill {
  background: blue;
  position: absolute;
  bottom: 0;
  width: 100%;
  transition:height 150ms ease-in;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='tanks'>
  <div data-max='8000' data-fill='2000' id='tank1' class='container'>
    <div class='fill'></div>
  </div>
  <div data-max='12000' data-fill='7000' id='tank2' class='container'>
    <div class='fill'></div>
  </div>
</div>

<h4>Transfer</h4>

<input type='number' value='0' />
<select>
  <option value='1'>Tank 1 to Tank 2</option>
  <option value='2'>Tank 2 to Tank 1</option>
</select>
<button>Transfer</button>

Answer 3

问题很清楚。我只能告诉你，如果你在容器内使用div，那么处理起来会更容易，而不是盒子阴影。

逻辑应该是

从输入框中取值。
检查tank1的百分比是多少。
检查坦克2的百分比。
将阴影div（现在的阴影）的高度从tank1阴影格的高度的当前百分比降低百分比（步长2％）。

5.从tank2阴影格的高度的当前百分比中增加阴影div（现在是盒子阴影）的高度（步长3％）。

希望有所帮助。

用于调整div的css属性的条件JQuery语句

更新

3 个答案: