Question

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

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

请参阅代码中的注释。

＆＃13;

// 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');
});

＆＃13;

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

＆＃13;

jsfiddle Demo

Answer 2

$(document).ready( function() {
    $('#totalItems, #enteredItems').keyup(function(){
        if( $('#totalItems').val() == $('#enteredItems').val() ){
            $('#hideThis').hide();
        }else{
            $('#hideThis').show();
        }
    });    
});

如果您还需要在页面加载时检查：

function checkFields(){
    if( $('#totalItems').val() == $('#enteredItems').val() ){
        $('#hideThis').hide();
    }else{
        $('#hideThis').show();
    }
}

$(document).ready( function() {
    $('#totalItems, #enteredItems').keyup(function(){
        checkFields();
    });   
    checkFields();
});

纯JavaScript实现：

function checkFields(){
    if(  document.getElementById('totalItems').value == document.getElementById('enteredItems').value ){
        document.getElementById('hideThis').style.display = 'none';
    }else{
        document.getElementById('hideThis').style.display = 'inline-block';
    }
}

document.getElementById('totalItems').addEventListener('keyup', function (){
   checkFields();
}, false);

document.getElementById('enteredItems').addEventListener('keyup', function (){
   checkFields();
}, false);

checkFields();

Answer 3

您可以为两个文本框绑定一个keyup事件，从中可以调用一个函数来检查两个值是否相同。

compare();
$("#totalItems,#enteredItems").keyup(function() {
    compare();
});
function compare() {
    if ($("#totalItems").val() == $("#enteredItems").val()) {
        $("#hideThis").hide();
    } else {
        $("#hideThis").show();
    }
}

Fiddle

Answer 4

这是新的JSFiddle

$(document).ready(function () {
    var webpart_ID = 'hideThis';
    var FieldA_id = 'totalItems';
    var FieldB_id = 'enteredItems';
    if ($('#' + FieldA_id).val() === $('#' + FieldB_id).val()) 
        $('#' + webpart_ID).hide();
    else 
        $('#' + webpart_ID).show();
});

这很有效。

隐藏基于其他元素值的元素

4 个答案: