如何选择不是空值输入和隐藏输入并显示另一个输入？

Question

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

以下是我的示例代码：

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

homestead

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>