javascript - 如何选择非空值输入并隐藏输入并显示另一个输入？

Question

我想选择非空输入然后在点击后隐藏它并显示另一个输入而不是隐藏输入。

这是我的示例代码:

$(".signupbtn").on('click', function(){
  $('input:text').each(function(){
    if ($(this).val().length == 0){
    
    } else {
      $(this).hide();
      //What I should add here?
    }
  });
});

.hideme {
  display: none;
  visibility: hidden;
}

.showme {
  display: inline;
  visibility: visible;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<form action="" method="POST" onsubmit="return false;">
  <input class="form-control showme" type="text" placeholder="text1" name="" value="">
  <input class="form-control hideme" value="Successfully Received!" readonly>
  <input class="form-control showme" type="text" placeholder="text2" name="" value="">
  <input class="form-control hideme" value="Successfully Received!" readonly>
  <input class="form-control showme" type="text" placeholder="text3" name="" value="">
  <input class="form-control hideme" value="Successfully Received!" readonly>
  <button type="submit" class="signupbtn">Sign Up</button>
</form>

Answer 1

虽然你为你的任务采取的方法有点奇怪这里是实现它的方法:

$(".signupbtn").on("click", function () {
    $("input:text.showme").each(function () {
        if (!$(this).val() || $(this).val().length <= 0) {
            return;
        }
        
        $(this).next("input:text.hideme")
            .show()
            .css({"visibility": "visible", "display": "inline"});
        $(this).hide();
    });
});

.hideme {
    display: none;
    visibility: hidden;
}
.showme {
    display: inline;
    visibility: visible;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
	<form action="" method="POST" onsubmit="return false;">
	<input class="form-control showme" type="text" placeholder="text1" name="" value="">
	<input class="form-control hideme" value="Successfully Received!" readonly/>
	<input class="form-control showme" type="text" placeholder="text2" name="" value="">
	<input class="form-control hideme" value="Successfully Received!" readonly/>
	<input class="form-control showme" type="text" placeholder="text3" name="" value="">
	<input class="form-control hideme" value="Successfully Received!" readonly/>
	<button type="submit" class="signupbtn">Sign Up</button>
	</form>

---

EDIT01:

为所有与表单相关的元素提供通用解决方案:

$(".signupbtn").on("click", function () {
    $("input.showme, textarea.showme, select.showme").each(function () {
        if (!$(this).val() || $(this).val().length <= 0) {
            return;
        }
        
        $(this).next("input.hideme, textarea.hideme, select.hideme")
            .show()
            .css({"visibility": "visible", "display": "inline"});
        $(this).hide();
    });
});

.hideme {
    display: none;
    visibility: hidden;
}
.showme {
    display: inline;
    visibility: visible;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form action="" method="POST" onsubmit="return false;">
<input class="form-control showme" type="text" placeholder="text1" name="" value="">
<input class="form-control hideme" value="Successfully Received!" readonly />
<textarea class="form-control showme" placeholder="text2" name=""></textarea>
<textarea class="form-control hideme" readonly>Successfully Received!</textarea>
<select class="form-control showme" name="" value="">
    <option>0</option>
    <option>1</option>
</select>
<select class="form-control hideme" readonly >
    <option>Successfully Received!</option>
</select>
<button type="submit" class="signupbtn">Sign Up</button>
</form>