jquery - 当两个输入都被填充时更改图像

Question

我有两个输入和一个图像...当两个输入都已填充时是否可以更改图像？

HTML:

<div class="loginForm">
    <input class="input jmeno" type="text" name="jmeno" placeholder="jmeno" value=""><br>
    <div id="input_container"><input class="input heslo" type="text" name="heslo" placeholder="heslo" value="">
        <img src="https://www.w3.org/2005/ajar/icons/16dot-blue.gif" id="input-blue-img">
        <img src="http://www.berrylocate.com/images/dotgreen.png" id="input-green-img">
    </div>  
</div>

CSS:

#input-green-img {display:none;}

JS:

var $allInputs = $("input:text"),
$button = $("#input-blue-img");
$button2 = $("#input-green-img");
$allInputs.change(function() {
    var isEmpty = $allInputs.filter(function() {
        return ($(this).val()=="");
    });
    $button.hide();
    $button2.show();
    if(isEmpty.length == 0) {
        $button.show();
    }
});

JSfiddle:https://jsfiddle.net/qeubzwvy/1/

Answer 1

可以，试试这个

首先使用 keyup 事件立即捕获输入的变化，然后检查两者是否都有值，并显示/隐藏右键:

$('input').on('keyup',function(){
    var complete = true;
    $allInputs.each(function(){
       if($(this).val() === "") complete = false;
   });

   if(complete){
       $button.hide();
       $button2.show();
   } else {
       $button.show();
       $button2.hide();
   }
});

请在此处查看示例:https://jsfiddle.net/qeubzwvy/6/

---

或者在纯 javascript 中，如果你愿意的话:

var allInputs = document.getElementsByTagName("input"),
    button1 = document.getElementById('input-blue-img'),
    button2 = document.getElementById('input-green-img');

for(i=0; i<allInputs.length; i++) {
    allInputs[i].onkeyup=function(){
    var completed = true;
    for(y=0; y<allInputs.length; y++) {
        if(allInputs[y].value.length === 0) completed = false;
    }
    if(completed){
        button1.style.display = 'none';
      button2.style.display = 'block';
    } else {
        button1.style.display = 'block';
      button2.style.display = 'none';
    }
  };
}

FIDDLE