javascript - 如果 sibling 的值大于目标，则隐藏选项并删除值，如果 sibling 的值小于目标，则恢复删除的标签

标签 javascript jquery html css

我们有一个目标数，选项标签的值必须大于该目标数。我正在使用 jQuery 来隐藏选项标签。它们仅在先前 sibling 的值不大于目标数(在本例中为 450)时出现。

这是隐藏或显示选择标签及其选项的 jQuery

if ($('#maxTPH1').val() < $('#tphNeeded').val()) {
            $('#selectedSourceMaterial2, #materialInput2').fadeIn(800).css("display", "inline-block");
            $('#sourceMaterialDivImage').css('margin-bottom', "17%");
        } else {
            $('#selectedSourceMaterial2, #materialInput2').css("display", "none");
            $('#sourceMaterialDivImage').css('margin-bottom', "13%");
        }

这有效，并且选择元素根据其 sibling 的值是否小于或大于目标数字淡入或隐藏 ('#tphNeeded')

第一个挑战是，一旦我选择了一个选项(比如第三个选择标签)并且它获得了一个值，如果我更改它之前的任何兄弟(前两个选择标签)的值以使它们大于目标数字，第三个 select 标记被隐藏，但它的值仍然是总表单值的一部分。

例如:如果

       maxTPH1 = 200: 
       maxTPH2 = 200:
       maxTPH3 = 200:

我的总值为 600。只要我的总值小于 450，选择标签就会一直出现。如果我返回并将选择 2 更改为 300，则前两个选择标签的总值为 500所以选择 3 是隐藏的，因为它们的值大于 450 的目标，但是我的选择标签 3 的值不会变为 0，除非我使用

将其设置为 0 
if (maxTPH1 + maxTPH2 >= $('#tphNeeded').val() ) {
  maxTPH3 = 0;
  maxTPH4 = 0;
}

我们有四个选择标签的限制。

我可以将标签设置回 0。

如果我是两个，但再次将前两个标签改回 200，第三个标签再次出现，200 的值仍然显示，但现在计算为 0。即使数字显示 200。我相信它有与范围或操作顺序有关的事情。 这是代码片段

var maxTPH1 = 0;
var maxTPH2 = 0;
var maxTPH3 = 0;
var maxTPH4 = 0;
var tphAdditonalNeededValue;

$(document).ready(function() {


  jQuery.selectValidator = function selectValidator() {
    // If value of #maxTPH1 is less than #tphNeeded add a second bin, if they change option one re-evaluate
    if ($('#maxTPH1').val() < $('#tphNeeded').val()) {
      $('#selectedSourceMaterial2, #materialInput2').fadeIn(800).css("display", "inline-block");
      $('#sourceMaterialDivImage').css('margin-bottom', "17%");
    } else {
      $('#selectedSourceMaterial2, #materialInput2').css("display", "none");
      $('#sourceMaterialDivImage').css('margin-bottom', "13%");
    }

    // If value of #maxTPH1 + #maxTPH2 is less than #tphNeeded add a third bin
    if ((parseInt($('#maxTPH1').val()) + parseInt($('#maxTPH2').val())) < parseInt($('#tphNeeded').val())) {
      $('#selectedSourceMaterial3, #materialInput3').fadeIn(800).css("display", "inline-block");
    } else {
      $('#selectedSourceMaterial3, #materialInput3').css("display", "none");
      $('#selectedSourceMaterial4, #materialInput4').css("display", "none");
    }


    // If value of #maxTPH1 + #maxTPH2 + #maxTPH3 is less than #tphNeeded add a fourth bin
    if ((parseInt($('#maxTPH1').val()) + parseInt($('#maxTPH2').val()) + parseInt($('#maxTPH3').val())) < parseInt($('#tphNeeded').val())) {
      $('#selectedSourceMaterial4, #materialInput4').fadeIn(800).css("display", "inline-block");

    } else {
      $('#selectedSourceMaterial4, #materialInput4').css("display", "none");
    }





    var tphAdditonalNeededValue = parseInt($('#tphNeeded').val()) -
      (parseInt(maxTPH1) + parseInt(maxTPH2) + parseInt(maxTPH3) + parseInt(maxTPH4));

    $('#tphAdditionalNeeded').val(tphAdditonalNeededValue);




    // Puts 0 in #tphAdditionalNeeded as soon as the value becomes less than 1
    // if (tphAdditonalNeededValue < 1) {
    // 	$('#tphAdditionalNeeded').val(0);
    // }






    // Calculations when aggregates are selected





    // Reset select options values


    // if ( $('#maxTPH4').is(':hidden') ) {
    // 	maxTPH4 = 0;
    // }


    // Your changes have been reverted



  } // end of select Validator









  // When select tag changes, take value of selected option and make it #maxTPH1 value
  $('#selectedSourceMaterial1').on("change", function() {
    $('#maxTPH1').val($('#selectedSourceMaterial1 option:selected').val());
    if ($('#maxTPH1').val() != null) {
      maxTPH1 = $('#maxTPH1').val();
    }

    $.selectValidator();
    // $.tphAdjustment();

  });

  // When select tag changes, take value of selected option and make it #maxTPH2 value
  $('#selectedSourceMaterial2').on("change", function() {
    $('#maxTPH2').val($('#selectedSourceMaterial2 option:selected').val());

    if ($('#maxTPH2').val() != null) {
      maxTPH2 = $('#maxTPH2').val();
    }

    $.selectValidator();

  });


  // When select tag changes, take value of selected option and make it #maxTPH3 value
  $('#selectedSourceMaterial3').on("change", function() {
    $('#maxTPH3').val($('#selectedSourceMaterial3 option:selected').val());

    if ($('#maxTPH3').val() != null) {
      maxTPH3 = $('#maxTPH3').val();
    }

    $.selectValidator();

  });

  // When select tag changes, take value of selected option and make it #maxTPH4 value
  $('#selectedSourceMaterial4').on("change", function() {
    $('#maxTPH4').val($('#selectedSourceMaterial4 option:selected').val());

    if ($('#maxTPH4').val() != null) {
      maxTPH4 = $('#maxTPH4').val();
    }

    $.selectValidator();

    if ((parseInt($('#maxTPH1').val()) + parseInt($('#maxTPH2').val()) + parseInt($('#maxTPH3').val()) + parseInt($('#maxTPH4').val())) < parseInt($('#tphNeeded').val())) {
      alert("You do not have enough material to calibrate with the target tons desired!");
    }


  });




  //Removes default select tags after each select is changed
  $('#selectedSourceMaterial1').on("change", function() {
    $('#defaultSelect1').remove(); // Removes default select tag after person selects option

  });

  $('#selectedSourceMaterial2').on("change", function() {
    $('#defaultSelect2').remove(); // Removes default select tag after person selects option2

  });

  $('#selectedSourceMaterial3').on("change", function() {
    $('#defaultSelect3').remove(); // Removes default select tag after person selects option2

  });

  $('#selectedSourceMaterial4').on("change", function() {
    $('#defaultSelect4').remove(); // Removes default select tag after person selects option2

  });





  // Opens Calibration LightBox and Overlay
  $('.calibrationButton').click(function() {
    $("#calibration").css("width", "100%");
    $('#sourceMaterialDiv, #sourceMaterialForm').fadeIn(1000);
    $('.overlay').css("background-color", "rgba(230,230,0,0.6)"); //Gets noticeCalibrationDiv color
  });

  // Closes noticeCalibration div and fades in inspect reminder prompt
  $('.noticeCalibration').click(function() {
    $('#noticeCalibrationDiv').hide();
    $('#calibrationInspectDiv').fadeIn(1000);
    $('.overlay').css("background-color", "rgba(204,0,0,0.6)"); // Gets calibration Inspect color
  });

  // Closes calibratioInspect div and fades in configure prompt
  $('.calibrationInspect').click(function() {
    $('#calibrationInspectDiv').hide();
    $('#targetTonsDiv, #targetTonsForm').fadeIn(1000);
    $('.overlay').css("background-color", "rgba(0,179,0,0.6)"); // Gets targetTons div's color
  });

  // Closes calibratioInspect div and fades in configure prompt
  $('.targetTons').click(function() {
    $('#targetTonsDiv').hide();
    $('#sourceMaterialDiv, #sourceMaterialForm').fadeIn(1000);
    $('.overlay').css("background-color", "rgba(0,179,0,0.6)"); // Gets sourceMaterial div's color
  });

  $('.sourceMaterial').click(function() {
    $('#sourceMaterialDiv').hide();
    $('#adjustedTPH, #adjustedTPHFormDiv').fadeIn(1000);
    $('.overlay').css("background-color", "rgba(0,0,204,0.4)"); // Gets adjustedTPH div's color
  });






  // Cancels calibration and closes overlay
  $('.cancelCalibration').click(function() {
    $("#calibration").css("width", "0");
    $('.calibrationList li div').css("display", "none");
  });


  $('.testForError').click(function() {
    $("body").css("background-color", "green");
  });


  // Adds class to selected radio button and removes class from sibling radio buttons for enable/disable feature
  $('#ttRadioForm input').click(function() {
    $(this).addClass('ttRadioSelected').siblings().removeClass('ttRadioSelected');

    //Adds and removes classes and disable/enabled on input fields if related radio button is checked or unchecked
    if ($('#radioHigh').hasClass('ttRadioSelected')) {
      $('#inputHigh').addClass('ttInputEnabled').prop('disabled', false).siblings().removeClass('ttInputEnabled').prop('disabled', true);
    }

    if ($('#radioMid').hasClass('ttRadioSelected')) {
      $('#inputMid').addClass('ttInputEnabled').prop('disabled', false).siblings().removeClass('ttInputEnabled').prop('disabled', true);
    }

    if ($('#radioLow').hasClass('ttRadioSelected')) {
      $('#inputLow').addClass('ttInputEnabled').prop('disabled', false).siblings().removeClass('ttInputEnabled').prop('disabled', true);
    }

  });


  //attach keypress to input
  $('#ttInputForm input, #targetTestTons').keydown(function(event) {
    // Allow special chars + arrows 
    if (event.keyCode == 46 || event.keyCode == 8 || event.keyCode == 9 ||
      (event.keyCode == 190 && event.shiftKey !== true) ||
      event.keyCode == 27 || event.keyCode == 13 ||
      (event.keyCode == 65 && event.ctrlKey === true) ||
      (event.keyCode >= 35 && event.keyCode <= 39)) {
      return;
    } else {
      // If it's not a number stop the keypress
      if (event.shiftKey || (event.keyCode < 48 || event.keyCode > 57) && (event.keyCode < 96 || event.keyCode > 105)) {
        event.preventDefault();
      }
    }
  });



























}); // End of Document.ready
/*@font-face {
    font-family: 'Droid-Serif';
    src: url(../fonts/Droid_Serif/DroidSerif.ttf);
}*/

body {
  background-image: url("../images/scalesbackground.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-color: black;
}


/* The Overlay (background) */

.overlay {
  /* Height & width depends on how you want to reveal the overlay (see JS below) */
  height: 100%;
  width: 0;
  position: fixed;
  /* Stay in place */
  z-index: 100;
  /* Sit on top */
  left: 0;
  top: 0;
  background-color: rgb(0, 0, 0);
  /* Black fallback color */
  background-color: rgba(0, 0, 0, 0.6);
  /* Black w/opacity */
  overflow-x: hidden;
  /* Disable horizontal scroll */
  /*transition: 0.1s;*/
  /* 0.5 second transition effect to slide in or slide down the overlay (height or width, depending on reveal) */
}


/* Position the content inside the overlay */

.overlay-content {
  position: relative;
  top: 25%;
  /* 25% from the top */
  width: 100%;
  /* 100% width */
  text-align: center;
  /* Centered text/links */
}

.calibrationList {
  width: 90%;
  margin-top: 15%;
  background-color: white;
  list-style: none;
  margin-left: auto;
  margin-right: auto;
  padding: 5px;
  border: black solid 1px;
}

.calibrationList li div {
  /* Stops calibration divs from displaying until jQuery shows them */
  display: none;
  font-family: "Arial";
  font-weight: bold;
}

.calibrationList form {
  margin-bottom: .8em;
}

.calibrationList li p {
  display: inline-block;
  margin: 0px 0px 16px 20px;
  width: 75%;
  font-size: 12pt;
  line-height: 22px;
}

.calibrateDivImage {
  display: inline-block;
  width: 13%;
  padding: 6px;
}

#targetTonsDiv img,
#calibrationInspectDiv img {
  margin-bottom: 16%;
}

#sourceMaterialDivImage {
  width: 13%;
  margin-bottom: 13%;
}

#adjustedTPH img {
  width: 11%;
  padding: 0px;
}

.buttonDiv {
  margin-left: 50%;
}

.buttonDiv button {
  background-color: gray;
  padding: 5px 23px 5px 23px;
  font-size: 16px;
  border-radius: 30px;
  outline: none;
}

#targetTonsHeader,
#sourceMaterialHeader,
#adjustedTPHHeader {
  text-align: center;
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 1%;
}

#targetTonsForm {
  width: 70%;
  display: inline-block;
  margin: 5px 0px 15px 15px;
  padding: 10px 5px 5px 5px;
}

#targetTonsForm p {
  text-align: center;
  margin-bottom: 0;
}

#targetTonsForm form {
  border: 2px solid black;
  display: inline-block;
}

#ttRadioForm {
  width: 30%;
  line-height: 23px;
  margin-right: 0px;
  margin-left: 5%;
}

#ttInputForm {
  margin-left: -5px;
}

#targetTestTonsForm {
  border: none !important;
  width: 100%;
  margin-left: -7%;
  margin-top: 5%;
}

#ttInputForm input {
  height: 23px;
  border-top: 0px;
  border-right: 0px;
  border-left: 0px;
  border-bottom: 2px solid black;
  padding-left: 5px;
  outline: none;
  font-size: 16px;
}

#targetTestTonsForm input {
  height: 23px;
  font-size: 16px;
  outline: none;
  margin-left: -3%;
  width: 49%;
  border: 2px solid black;
}

#targetTestTonsForm p {
  width: 45%;
  margin: 0;
  padding: 0;
}

.ttTextBottomInput {
  border-bottom: 0px !important;
}

#ttInputForm input:disabled {
  background-color: gray;
}

#sourceMaterialForm,
#adjustedTPHFormDiv {
  width: 85%;
  display: inline-block;
  margin-left: 1%;
}

#sourceMaterialForm select,
#adjustedTPH select {
  width: 51%;
  height: 23px;
  font-size: 16px;
}

#selectedSourceMaterial2,
#materialInput2,
#selectedSourceMaterial3,
#materialInput3,
#selectedSourceMaterial4,
#materialInput4 {
  display: none;
}

.sourceMaterialSelectInputForm,
.adjustedTPHInputForm {
  display: inline-block;
  width: 47%;
}

.sourceMaterialSelectInputForm input,
.adjustedTPHInputForm input {
  width: 48%;
  outline: none;
  height: 23px;
  font-size: 16px;
  border: 2px solid black;
}

.maxTPH {
  margin-right: -3%;
}

#tphNeededSourceMaterialP,
#tphAdditionalNeededSourceMaterialP {
  width: 69%;
  text-align: right;
  display: inline-block;
}

.tphNeeded {
  width: 22%;
  display: inline-block;
}

.tphNeeded input {
  width: 100%;
  border: 2px solid black;
  height: 23px;
  font-size: 16px;
}

.maxTPHLabel {
  margin-left: 8%;
}

.adjTPHLabel {
  margin-left: 11%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>


<html>

<head>
  <title>Test Modal</title>

  <!-- Stylesheets -->
  <link rel="stylesheet" type="text/css" href="css/style.css">

  <!-- Scripts -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="js/main.js"></script>
  <script src="js/sourceMaterial.js"></script>
</head>

<body>

  <div id="calibration" class="overlay">


    <!-- Overlay content -->

    <ul class="calibrationList">



      <li>
        <div id="sourceMaterialDiv" class="overlayContent">
          <p id="sourceMaterialHeader">Please select the source material</p>
          <img id="sourceMaterialDivImage" src="images/questionicon.png">
          <div id="sourceMaterialForm">
            <select id="selectedSourceMaterial1" name="selectedSourceMaterial1">
				  	  <option id="defaultSelect1" value="0" selected>--SELECT--</option>
				  	  <option class="selectedOption" value="100">stone</option>
              <option class="selectedOption" value="200">gold</option>
              <option class="selectedOption" value="300">rainbows</option>
					</select>
            <form id="materialInput1" class="sourceMaterialSelectInputForm">
              <label class="maxTPHLabel">Max TPH</label> <label class="adjTPHLabel">Adj. TPH</label> </br>
              <input class="maxTPH" type="text" id="maxTPH1" name="maxTPH1" maxlength="7" disabled>
              <input class="adjTPH" type="text" id="adjTPH1" name="adjTPH1" maxlength="7" placeholder=" " disabled>
            </form>





            <!--Second select and form appear if additional TPH is needed  -->
            <select id="selectedSourceMaterial2" name="selectedSourceMaterial2">
					  <option id="defaultSelect2" value="0" selected>--SELECT--</option>
				  	 <option class="selectedOption" value="100">stone</option>
             <option class="selectedOption" value="200">gold</option>
             <option class="selectedOption" value="300">rainbows</option>
					</select>
            <form id="materialInput2" class="sourceMaterialSelectInputForm">
              <input class="maxTPH" type="text" id="maxTPH2" name="maxTPH2" maxlength="7" placeholder=" " disabled>
              <input class="adjTPH" type="text" id="adjTPH2" name="adjTPH2" maxlength="7" placeholder=" " disabled>
            </form>




            <!--Third select and form appear if additional TPH is needed  -->
            <select id="selectedSourceMaterial3" name="selectedSourceMaterial3">
					  <option id="defaultSelect3" value="0" selected>--SELECT--</option>
				  	 <option class="selectedOption" value="100">stone</option>
             <option class="selectedOption" value="200">gold</option>
             <option class="selectedOption" value="300">rainbows</option>
					</select>
            <form id="materialInput3" class="sourceMaterialSelectInputForm">
              <input class="maxTPH" type="text" id="maxTPH3" name="maxTPH3" maxlength="7" placeholder=" " disabled>
              <input class="adjTPH" type="text" id="adjTPH3" name="adjTPH3" maxlength="7" placeholder=" " disabled>
            </form>






            <!--Fourth select and form appear if additional TPH is needed  -->
            <select id="selectedSourceMaterial4" name="selectedSourceMaterial4">
					  <option id="defaultSelect4" value="0" selected>--SELECT--</option>
				  	  <option class="selectedOption" value="100">stone</option>
              <option class="selectedOption" value="200">gold</option>
              <option class="selectedOption" value="300">rainbows</option>
					</select>
            <form id="materialInput4" class="sourceMaterialSelectInputForm">
              <input class="maxTPH" type="text" id="maxTPH4" name="maxTPH4" maxlength="7" placeholder=" " disabled>
              <input class="adjTPH" type="text" id="adjTPH4" name="adjTPH4" maxlength="7" placeholder=" " disabled>
            </form>





            </br>
            <p id="tphNeededSourceMaterialP">TPH Needed</p>
            <form class="tphNeeded">
              <input type="text" id="tphNeeded" name="tphNeeded" maxlength="7" value="450" disabled>
            </form>
            </br>
            <p id="tphAdditionalNeededSourceMaterialP">Additional TPH Needed</p>
            <form class="tphNeeded">
              <input type="text" id="tphAdditionalNeeded" name="tphAdditionalNeeded" maxlength="7" placeholder=" " disabled>
            </form>

          </div>
          <!--End of sourceMaterialForm -->


          <div class="buttonDiv">
            <button class="cancelCalibration">Cancel</button>
            <button type="submit" class="sourceMaterial">Ok</button>
          </div>
          <!--End of buttonDiv  -->
        </div>
      </li>









      <li>
        <div id="adjustedTPH" class="overlayContent">
          <p id="adjustedTPHHeader">The materials were redistributed as shown</p>
          <img id="infoIcon" class="calibrateDivImage" src="images/infoicon.png">
          <div id="adjustedTPHFormDiv">

            <select id="adjustedSourceMaterial1" name="selectedSourceMaterial1">
					  	  <?php require 'selectoptions.php'; ?>
						</select>
            <form id="adjustedTPH1" class="adjustedTPHInputForm">
              <label class="maxTPHLabel">Max TPH</label> <label class="adjTPHLabel">Adj. TPH</label> </br>
              <input class="maxTPH" type="text" id="adjustedMax1" name="maxTPH1" maxlength="7" disabled>
              <input class="adjTPH" type="text" id="adjustedAdj1" name="adjTPH1" maxlength="7" placeholder=" " disabled>
            </form>



            </br>
            <p id="tphNeededSourceMaterialP">TPH Needed</p>
            <form class="tphNeeded">
              <input type="text" id="tphNeeded" name="tphNeeded" maxlength="7" value="450" disabled>
            </form>
            </br>
            <p id="tphAdditionalNeededSourceMaterialP">Additional TPH Needed</p>
            <form class="tphNeeded">
              <input type="text" id="tphAdditionalNeeded" name="tphAdditionalNeeded" maxlength="7" placeholder=" " disabled>
            </form>


          </div>
          <!--End of adjustedTPHFormDiv -->


          <div class="buttonDiv">
            <button class="cancelCalibration">Cancel</button>
            <button class="adjustedTPHButton">Ok</button>
          </div>
          <!--End of buttonDiv  -->
        </div>
        <!--End of adjustedTPH Div -->
      </li>




    </ul>








  </div>
  <!--End of #calibration .overlay -->



  <!-- Use any element to open/show the overlay navigation menu -->
  <button class="calibrationButton"><span>Calibrate</span></button>








</body>

</html>

如果您需要我解释一些事情，请告诉我。如果我们想通了，这可能是一个有用的技巧，我们很多人都可以使用!

最佳答案

您可以获得 :visible 选择的总数...

我在下面使用了一个 total 变量...并遍历了所有可见的选择。
由于隐藏/显示选择的动画延迟，需要 setTimeout()。

setTimeout(function(){
  console.clear();
  var total=0;
    $("[id^='selectedSourceMaterial']:visible").each(function(){
      console.log($(this).val());
      total += parseInt($(this).val());
    });
    console.log(total);
    //var tphAdditonalNeededValue = parseInt($('#tphNeeded').val()) - (parseInt(maxTPH1) + parseInt(maxTPH2) + parseInt(maxTPH3) + parseInt(maxTPH4));

    var tphAdditonalNeededValue = parseInt($('#tphNeeded').val()) - total; 
    $('#tphAdditionalNeeded').val(tphAdditonalNeededValue);
},1000);

您可以尝试以下代码段。

var maxTPH1 = 0;
var maxTPH2 = 0;
var maxTPH3 = 0;
var maxTPH4 = 0;
var tphAdditonalNeededValue;

$(document).ready(function() {


  jQuery.selectValidator = function selectValidator() {
  
    
    
    
    
    // If value of #maxTPH1 is less than #tphNeeded add a second bin, if they change option one re-evaluate
    if ($('#maxTPH1').val() < $('#tphNeeded').val()) {
      $('#selectedSourceMaterial2, #materialInput2').fadeIn(800).css("display", "inline-block");
      $('#sourceMaterialDivImage').css('margin-bottom', "17%");
    } else {
      $('#selectedSourceMaterial2, #materialInput2').css("display", "none");
      $('#sourceMaterialDivImage').css('margin-bottom', "13%");
    }

    // If value of #maxTPH1 + #maxTPH2 is less than #tphNeeded add a third bin
    if ((parseInt($('#maxTPH1').val()) + parseInt($('#maxTPH2').val())) < parseInt($('#tphNeeded').val())) {
      $('#selectedSourceMaterial3, #materialInput3').fadeIn(800).css("display", "inline-block");
    } else {
      $('#selectedSourceMaterial3, #materialInput3').css("display", "none");
      $('#selectedSourceMaterial4, #materialInput4').css("display", "none");
    }


    // If value of #maxTPH1 + #maxTPH2 + #maxTPH3 is less than #tphNeeded add a fourth bin
    if ((parseInt($('#maxTPH1').val()) + parseInt($('#maxTPH2').val()) + parseInt($('#maxTPH3').val())) < parseInt($('#tphNeeded').val())) {
      $('#selectedSourceMaterial4, #materialInput4').fadeIn(800).css("display", "inline-block");

    } else {
      $('#selectedSourceMaterial4, #materialInput4').css("display", "none");
    }



    setTimeout(function(){
      console.clear();
      var total=0;
        $("[id^='selectedSourceMaterial']:visible").each(function(){
          console.log($(this).val());
          total += parseInt($(this).val());
        });
        console.log(total);
        //var tphAdditonalNeededValue = parseInt($('#tphNeeded').val()) - (parseInt(maxTPH1) + parseInt(maxTPH2) + parseInt(maxTPH3) + parseInt(maxTPH4));

        var tphAdditonalNeededValue = parseInt($('#tphNeeded').val()) - total; 
        $('#tphAdditionalNeeded').val(tphAdditonalNeededValue);
    },1000);

    




  } // end of select Validator









  // When select tag changes, take value of selected option and make it #maxTPH1 value
  $('#selectedSourceMaterial1').on("change", function() {
    $('#maxTPH1').val($('#selectedSourceMaterial1 option:selected').val());
    if ($('#maxTPH1').val() != null) {
      maxTPH1 = $('#maxTPH1').val();
    }

    $.selectValidator();
    // $.tphAdjustment();

  });

  // When select tag changes, take value of selected option and make it #maxTPH2 value
  $('#selectedSourceMaterial2').on("change", function() {
    $('#maxTPH2').val($('#selectedSourceMaterial2 option:selected').val());

    if ($('#maxTPH2').val() != null) {
      maxTPH2 = $('#maxTPH2').val();
    }

    $.selectValidator();

  });


  // When select tag changes, take value of selected option and make it #maxTPH3 value
  $('#selectedSourceMaterial3').on("change", function() {
    $('#maxTPH3').val($('#selectedSourceMaterial3 option:selected').val());

    if ($('#maxTPH3').val() != null) {
      maxTPH3 = $('#maxTPH3').val();
    }

    $.selectValidator();

  });

  // When select tag changes, take value of selected option and make it #maxTPH4 value
  $('#selectedSourceMaterial4').on("change", function() {
    $('#maxTPH4').val($('#selectedSourceMaterial4 option:selected').val());

    if ($('#maxTPH4').val() != null) {
      maxTPH4 = $('#maxTPH4').val();
    }

    $.selectValidator();

    if ((parseInt($('#maxTPH1').val()) + parseInt($('#maxTPH2').val()) + parseInt($('#maxTPH3').val()) + parseInt($('#maxTPH4').val())) < parseInt($('#tphNeeded').val())) {
      alert("You do not have enough material to calibrate with the target tons desired!");
    }


  });




  //Removes default select tags after each select is changed
  $('#selectedSourceMaterial1').on("change", function() {
    $('#defaultSelect1').remove(); // Removes default select tag after person selects option

  });

  $('#selectedSourceMaterial2').on("change", function() {
    $('#defaultSelect2').remove(); // Removes default select tag after person selects option2

  });

  $('#selectedSourceMaterial3').on("change", function() {
    $('#defaultSelect3').remove(); // Removes default select tag after person selects option2

  });

  $('#selectedSourceMaterial4').on("change", function() {
    $('#defaultSelect4').remove(); // Removes default select tag after person selects option2

  });





  // Opens Calibration LightBox and Overlay
  $('.calibrationButton').click(function() {
    $("#calibration").css("width", "100%");
    $('#sourceMaterialDiv, #sourceMaterialForm').fadeIn(1000);
    $('.overlay').css("background-color", "rgba(230,230,0,0.6)"); //Gets noticeCalibrationDiv color
  });

  // Closes noticeCalibration div and fades in inspect reminder prompt
  $('.noticeCalibration').click(function() {
    $('#noticeCalibrationDiv').hide();
    $('#calibrationInspectDiv').fadeIn(1000);
    $('.overlay').css("background-color", "rgba(204,0,0,0.6)"); // Gets calibration Inspect color
  });

  // Closes calibratioInspect div and fades in configure prompt
  $('.calibrationInspect').click(function() {
    $('#calibrationInspectDiv').hide();
    $('#targetTonsDiv, #targetTonsForm').fadeIn(1000);
    $('.overlay').css("background-color", "rgba(0,179,0,0.6)"); // Gets targetTons div's color
  });

  // Closes calibratioInspect div and fades in configure prompt
  $('.targetTons').click(function() {
    $('#targetTonsDiv').hide();
    $('#sourceMaterialDiv, #sourceMaterialForm').fadeIn(1000);
    $('.overlay').css("background-color", "rgba(0,179,0,0.6)"); // Gets sourceMaterial div's color
  });

  $('.sourceMaterial').click(function() {
    $('#sourceMaterialDiv').hide();
    $('#adjustedTPH, #adjustedTPHFormDiv').fadeIn(1000);
    $('.overlay').css("background-color", "rgba(0,0,204,0.4)"); // Gets adjustedTPH div's color
  });






  // Cancels calibration and closes overlay
  $('.cancelCalibration').click(function() {
    $("#calibration").css("width", "0");
    $('.calibrationList li div').css("display", "none");
  });


  $('.testForError').click(function() {
    $("body").css("background-color", "green");
  });


  // Adds class to selected radio button and removes class from sibling radio buttons for enable/disable feature
  $('#ttRadioForm input').click(function() {
    $(this).addClass('ttRadioSelected').siblings().removeClass('ttRadioSelected');

    //Adds and removes classes and disable/enabled on input fields if related radio button is checked or unchecked
    if ($('#radioHigh').hasClass('ttRadioSelected')) {
      $('#inputHigh').addClass('ttInputEnabled').prop('disabled', false).siblings().removeClass('ttInputEnabled').prop('disabled', true);
    }

    if ($('#radioMid').hasClass('ttRadioSelected')) {
      $('#inputMid').addClass('ttInputEnabled').prop('disabled', false).siblings().removeClass('ttInputEnabled').prop('disabled', true);
    }

    if ($('#radioLow').hasClass('ttRadioSelected')) {
      $('#inputLow').addClass('ttInputEnabled').prop('disabled', false).siblings().removeClass('ttInputEnabled').prop('disabled', true);
    }

  });


  //attach keypress to input
  $('#ttInputForm input, #targetTestTons').keydown(function(event) {
    // Allow special chars + arrows 
    if (event.keyCode == 46 || event.keyCode == 8 || event.keyCode == 9 ||
      (event.keyCode == 190 && event.shiftKey !== true) ||
      event.keyCode == 27 || event.keyCode == 13 ||
      (event.keyCode == 65 && event.ctrlKey === true) ||
      (event.keyCode >= 35 && event.keyCode <= 39)) {
      return;
    } else {
      // If it's not a number stop the keypress
      if (event.shiftKey || (event.keyCode < 48 || event.keyCode > 57) && (event.keyCode < 96 || event.keyCode > 105)) {
        event.preventDefault();
      }
    }
  });


}); // End of Document.ready
/*@font-face {
    font-family: 'Droid-Serif';
    src: url(../fonts/Droid_Serif/DroidSerif.ttf);
}*/

body {
  background-image: url("../images/scalesbackground.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-color: black;
}


/* The Overlay (background) */

.overlay {
  /* Height & width depends on how you want to reveal the overlay (see JS below) */
  height: 100%;
  width: 0;
  position: fixed;
  /* Stay in place */
  z-index: 100;
  /* Sit on top */
  left: 0;
  top: 0;
  background-color: rgb(0, 0, 0);
  /* Black fallback color */
  background-color: rgba(0, 0, 0, 0.6);
  /* Black w/opacity */
  overflow-x: hidden;
  /* Disable horizontal scroll */
  /*transition: 0.1s;*/
  /* 0.5 second transition effect to slide in or slide down the overlay (height or width, depending on reveal) */
}


/* Position the content inside the overlay */

.overlay-content {
  position: relative;
  top: 25%;
  /* 25% from the top */
  width: 100%;
  /* 100% width */
  text-align: center;
  /* Centered text/links */
}

.calibrationList {
  width: 90%;
  margin-top: 15%;
  background-color: white;
  list-style: none;
  margin-left: auto;
  margin-right: auto;
  padding: 5px;
  border: black solid 1px;
}

.calibrationList li div {
  /* Stops calibration divs from displaying until jQuery shows them */
  display: none;
  font-family: "Arial";
  font-weight: bold;
}

.calibrationList form {
  margin-bottom: .8em;
}

.calibrationList li p {
  display: inline-block;
  margin: 0px 0px 16px 20px;
  width: 75%;
  font-size: 12pt;
  line-height: 22px;
}

.calibrateDivImage {
  display: inline-block;
  width: 13%;
  padding: 6px;
}

#targetTonsDiv img,
#calibrationInspectDiv img {
  margin-bottom: 16%;
}

#sourceMaterialDivImage {
  width: 13%;
  margin-bottom: 13%;
}

#adjustedTPH img {
  width: 11%;
  padding: 0px;
}

.buttonDiv {
  margin-left: 50%;
}

.buttonDiv button {
  background-color: gray;
  padding: 5px 23px 5px 23px;
  font-size: 16px;
  border-radius: 30px;
  outline: none;
}

#targetTonsHeader,
#sourceMaterialHeader,
#adjustedTPHHeader {
  text-align: center;
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 1%;
}

#targetTonsForm {
  width: 70%;
  display: inline-block;
  margin: 5px 0px 15px 15px;
  padding: 10px 5px 5px 5px;
}

#targetTonsForm p {
  text-align: center;
  margin-bottom: 0;
}

#targetTonsForm form {
  border: 2px solid black;
  display: inline-block;
}

#ttRadioForm {
  width: 30%;
  line-height: 23px;
  margin-right: 0px;
  margin-left: 5%;
}

#ttInputForm {
  margin-left: -5px;
}

#targetTestTonsForm {
  border: none !important;
  width: 100%;
  margin-left: -7%;
  margin-top: 5%;
}

#ttInputForm input {
  height: 23px;
  border-top: 0px;
  border-right: 0px;
  border-left: 0px;
  border-bottom: 2px solid black;
  padding-left: 5px;
  outline: none;
  font-size: 16px;
}

#targetTestTonsForm input {
  height: 23px;
  font-size: 16px;
  outline: none;
  margin-left: -3%;
  width: 49%;
  border: 2px solid black;
}

#targetTestTonsForm p {
  width: 45%;
  margin: 0;
  padding: 0;
}

.ttTextBottomInput {
  border-bottom: 0px !important;
}

#ttInputForm input:disabled {
  background-color: gray;
}

#sourceMaterialForm,
#adjustedTPHFormDiv {
  width: 85%;
  display: inline-block;
  margin-left: 1%;
}

#sourceMaterialForm select,
#adjustedTPH select {
  width: 51%;
  height: 23px;
  font-size: 16px;
}

#selectedSourceMaterial2,
#materialInput2,
#selectedSourceMaterial3,
#materialInput3,
#selectedSourceMaterial4,
#materialInput4 {
  display: none;
}

.sourceMaterialSelectInputForm,
.adjustedTPHInputForm {
  display: inline-block;
  width: 47%;
}

.sourceMaterialSelectInputForm input,
.adjustedTPHInputForm input {
  width: 48%;
  outline: none;
  height: 23px;
  font-size: 16px;
  border: 2px solid black;
}

.maxTPH {
  margin-right: -3%;
}

#tphNeededSourceMaterialP,
#tphAdditionalNeededSourceMaterialP {
  width: 69%;
  text-align: right;
  display: inline-block;
}

.tphNeeded {
  width: 22%;
  display: inline-block;
}

.tphNeeded input {
  width: 100%;
  border: 2px solid black;
  height: 23px;
  font-size: 16px;
}

.maxTPHLabel {
  margin-left: 8%;
}

.adjTPHLabel {
  margin-left: 11%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>


<html>

<head>
  <title>Test Modal</title>

  <!-- Stylesheets -->
  <link rel="stylesheet" type="text/css" href="css/style.css">

  <!-- Scripts -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="js/main.js"></script>
  <script src="js/sourceMaterial.js"></script>
</head>

<body>

  <div id="calibration" class="overlay">


    <!-- Overlay content -->

    <ul class="calibrationList">



      <li>
        <div id="sourceMaterialDiv" class="overlayContent">
          <p id="sourceMaterialHeader">Please select the source material</p>
          <img id="sourceMaterialDivImage" src="images/questionicon.png">
          <div id="sourceMaterialForm">
            <select id="selectedSourceMaterial1" name="selectedSourceMaterial1">
				  	  <option id="defaultSelect1" value="0" selected>--SELECT--</option>
				  	  <option class="selectedOption" value="100">stone</option>
              <option class="selectedOption" value="200">gold</option>
              <option class="selectedOption" value="300">rainbows</option>
					</select>
            <form id="materialInput1" class="sourceMaterialSelectInputForm">
              <label class="maxTPHLabel">Max TPH</label> <label class="adjTPHLabel">Adj. TPH</label> </br>
              <input class="maxTPH" type="text" id="maxTPH1" name="maxTPH1" maxlength="7" disabled>
              <input class="adjTPH" type="text" id="adjTPH1" name="adjTPH1" maxlength="7" placeholder=" " disabled>
            </form>





            <!--Second select and form appear if additional TPH is needed  -->
            <select id="selectedSourceMaterial2" name="selectedSourceMaterial2">
					  <option id="defaultSelect2" value="0" selected>--SELECT--</option>
				  	 <option class="selectedOption" value="100">stone</option>
             <option class="selectedOption" value="200">gold</option>
             <option class="selectedOption" value="300">rainbows</option>
					</select>
            <form id="materialInput2" class="sourceMaterialSelectInputForm">
              <input class="maxTPH" type="text" id="maxTPH2" name="maxTPH2" maxlength="7" placeholder=" " disabled>
              <input class="adjTPH" type="text" id="adjTPH2" name="adjTPH2" maxlength="7" placeholder=" " disabled>
            </form>




            <!--Third select and form appear if additional TPH is needed  -->
            <select id="selectedSourceMaterial3" name="selectedSourceMaterial3">
					  <option id="defaultSelect3" value="0" selected>--SELECT--</option>
				  	 <option class="selectedOption" value="100">stone</option>
             <option class="selectedOption" value="200">gold</option>
             <option class="selectedOption" value="300">rainbows</option>
					</select>
            <form id="materialInput3" class="sourceMaterialSelectInputForm">
              <input class="maxTPH" type="text" id="maxTPH3" name="maxTPH3" maxlength="7" placeholder=" " disabled>
              <input class="adjTPH" type="text" id="adjTPH3" name="adjTPH3" maxlength="7" placeholder=" " disabled>
            </form>






            <!--Fourth select and form appear if additional TPH is needed  -->
            <select id="selectedSourceMaterial4" name="selectedSourceMaterial4">
					  <option id="defaultSelect4" value="0" selected>--SELECT--</option>
				  	  <option class="selectedOption" value="100">stone</option>
              <option class="selectedOption" value="200">gold</option>
              <option class="selectedOption" value="300">rainbows</option>
					</select>
            <form id="materialInput4" class="sourceMaterialSelectInputForm">
              <input class="maxTPH" type="text" id="maxTPH4" name="maxTPH4" maxlength="7" placeholder=" " disabled>
              <input class="adjTPH" type="text" id="adjTPH4" name="adjTPH4" maxlength="7" placeholder=" " disabled>
            </form>





            </br>
            <p id="tphNeededSourceMaterialP">TPH Needed</p>
            <form class="tphNeeded">
              <input type="text" id="tphNeeded" name="tphNeeded" maxlength="7" value="450" disabled>
            </form>
            </br>
            <p id="tphAdditionalNeededSourceMaterialP">Additional TPH Needed</p>
            <form class="tphNeeded">
              <input type="text" id="tphAdditionalNeeded" name="tphAdditionalNeeded" maxlength="7" placeholder=" " disabled>
            </form>

          </div>
          <!--End of sourceMaterialForm -->


          <div class="buttonDiv">
            <button class="cancelCalibration">Cancel</button>
            <button type="submit" class="sourceMaterial">Ok</button>
          </div>
          <!--End of buttonDiv  -->
        </div>
      </li>









      <li>
        <div id="adjustedTPH" class="overlayContent">
          <p id="adjustedTPHHeader">The materials were redistributed as shown</p>
          <img id="infoIcon" class="calibrateDivImage" src="images/infoicon.png">
          <div id="adjustedTPHFormDiv">

            <select id="adjustedSourceMaterial1" name="selectedSourceMaterial1">
					  	  <?php require 'selectoptions.php'; ?>
						</select>
            <form id="adjustedTPH1" class="adjustedTPHInputForm">
              <label class="maxTPHLabel">Max TPH</label> <label class="adjTPHLabel">Adj. TPH</label> </br>
              <input class="maxTPH" type="text" id="adjustedMax1" name="maxTPH1" maxlength="7" disabled>
              <input class="adjTPH" type="text" id="adjustedAdj1" name="adjTPH1" maxlength="7" placeholder=" " disabled>
            </form>



            </br>
            <p id="tphNeededSourceMaterialP">TPH Needed</p>
            <form class="tphNeeded">
              <input type="text" id="tphNeeded" name="tphNeeded" maxlength="7" value="450" disabled>
            </form>
            </br>
            <p id="tphAdditionalNeededSourceMaterialP">Additional TPH Needed</p>
            <form class="tphNeeded">
              <input type="text" id="tphAdditionalNeeded" name="tphAdditionalNeeded" maxlength="7" placeholder=" " disabled>
            </form>


          </div>
          <!--End of adjustedTPHFormDiv -->


          <div class="buttonDiv">
            <button class="cancelCalibration">Cancel</button>
            <button class="adjustedTPHButton">Ok</button>
          </div>
          <!--End of buttonDiv  -->
        </div>
        <!--End of adjustedTPH Div -->
      </li>




    </ul>








  </div>
  <!--End of #calibration .overlay -->



  <!-- Use any element to open/show the overlay navigation menu -->
  <button class="calibrationButton"><span>Calibrate</span></button>








</body>

</html>

关于javascript - 如果 sibling 的值大于目标，则隐藏选项并删除值，如果 sibling 的值小于目标，则恢复删除的标签，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45806874/

上一篇：javascript - 如何通过函数验证数据格式、数据和焦点表单字段

下一篇：javascript - 递归遍历对象以创建父子关系

相关文章：

javascript - 理解 JavaScript promise 对象

Javascript压缩算法压缩成字符串？

php - $.ajax JQuery 进度条

html - 将 HTML 文件包含到 RMarkdown 文档中以生成 HTML 文档

java - JTextPane 追加 HTML 字符串

html - 表格位置变化

javascript - WordPress 模板文件中的 PHP javascript 冲突

javascript - 停止绝对定位的 div 以在相对父级内移动

jquery - 是否可以只包含正在使用的 jQuery Mobile 库的一部分？

javascript - 如何使用 jquery 更新表列

©2024 IT工具网  联系我们