javascript - 根据其他元素的值隐藏元素

Question

我试图根据两个字段的值隐藏一个表，这样如果 field2 等于 field1 表就会被隐藏。

JSfiddle

HTML:

<form>
    Expected Number of Items: <input type="text" value="14" name="totalItems" id="totalItems">
    <p>
    Number of Items Entered: <input type="text" value="14" name="enteredItems" id="enteredItems">
</form> 
<p>
<table border="1" style="width:100%" id="hideThis">
  <tr>
    <td>This should be hidden when "totalItems" equals "enteredItems"</td>
  </tr>
</table>

JS:

function toggleClass(eid, myclass){
    var theEle = document.getElementById(eid);
    var eClass = theEle.className;

    if(eClass.indexOf(myclass) >= 0){
        theEle.className = eClass.replace(myclass, "");
    }else{
        theEle.className  += "" +myclass;
    }
}

Answer 1

查看代码中的注释。

// Function to hide/show the table based on the values of inputs
function toggleTable() {

  // Hides the table if the values of both input are same
  $('#hideThis').toggle($('#totalItems').val() !== $('#enteredItems').val());
}

$(document).ready(function() {
  // Bind the keyup event on both the inputs, call the function on event
  $('#totalItems, #enteredItems').on('keyup', toggleTable).trigger('keyup');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<form>Expected Number of Items:
  <input type="text" value="14" name="totalItems" id="totalItems">
  <p>Number of Items Entered:
    <input type="text" value="14" name="enteredItems" id="enteredItems">
</form>
<p>
  <table border="1" style="width:100%" id="hideThis">
    <tr>
      <td>This should be hidden when "totalItems" equals "enteredItems"</td>
    </tr>
  </table>

jsfiddle Demo