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

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.

我的总体目标是将一些“输入”量从第一个 jar 转移到第二个 jar (反之亦然，但在这一点上我们已经超前了)。

在 tank 1 中，我给了一个 data- 属性 8000，它指的是那个 tank 的容量。 在坦克 2 中，我也做了同样的事情，但给了它 7500。

因此 jar 1 的高度是 500px(代表 8000 L)， jar 2 也是 500px，但代表 7500 L。

---

坦克一:命名约定设计

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

这也可以复制到坦克 2

---

然而，这并不像听起来那么简单。您知道，您必须确保您有足够的液体从 jar 1 中取出，并且 jar 2 中有足够的剩余空间。

我正在使用 box-shadow 属性编辑液体的“液位”。

我最初有嵌套 if 语句的想法，但我似乎无法正确实现它(参见代码片段)。

我还必须实现一项工作来“提取”当前的 box-shadow-spread(代表液体，请参阅 my previous question)。

任何帮助将不胜感激。 (我会根据需要进一步说明)。

---

更新

---

我已经测试了值的“创建”，它们是正确的。

 $(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");

       }
     }




   });
 });

 .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;
 }

<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>

或查看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

---

至少当您输入 <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');
});