我有五個 Textarea，但我想在用戶輸入時一個一個地顯示 Textarea。例如，只有第一個 Textarea 應該在頁面加載時可見，而 2-5 應該隱藏。當用戶輸入第一個文本區域時，第二個應該是可見的，而 3-5 應該是隱藏的。同樣，當用戶輸入第二個文本區域時，應該顯示第三個，并且應該仍然隱藏 4-5，依此類推。我已經為它寫了一些jQuery，請看一下。（我也有 20 個這樣的文本區域，所以this如果可能的話，我需要一個帶有選擇器的簡潔代碼。）
<textarea id="step1"></textarea>
<textarea id="step2"></textarea>
<textarea id="step3"></textarea>
<textarea id="step4"></textarea>
<textarea id="step5"></textarea>
<style>
#step2,#step3,#step4,#step5{display:none}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$('#step1').keyup(function(){
if ($(this).val().length == 0) {
$('#step2').css("display","none");
}
else {
$('#step2').css("display","block");
}
}).keyup();
</script>uj5u.com熱心網友回復：
您可以使用這樣的選擇器：在將它們添加到 keyup 事件處理程式時$('[id^=step]')獲取所有具有 id 開頭的元素。step
但是，如果檔案意外包含具有相似 id 的元素，則會有回傳誤報的風險。在我看來也$('textarea[id^=step]')不夠嚴格。
所以也是為了有一個更好的策略，我稍微修改了檔案，以便每個step元素實際上是一個 div 容器，其中嵌入了一個標簽和一個 textarea 并具有額外的好處，即您可以在螢屏上看到哪個 textarea 的證據來觀看標簽在它的旁邊。
我的演示將keyup事件處理程式添加到每個具有step類的元素中，約定它們的 idstep無論如何都應該以字串開頭并跟隨一個連續的數字。
此類事件處理程式在觸發時將提取觸發事件的容器 id 的數字部分，并獲取其旁邊具有連續 id 的容器 ( 1)。如果當前文本區域包含文本并且下一個文本區域不包含，則此類容器將根據條件隱藏或顯示。
不過，我不確定我是否完全理解這一點，請隨時糾正我，詳細說明我可能在哪里以及為什么錯了
$('.step textarea').keyup(function() {
const id = $(this).closest('.step').prop('id');
const idMatch = /step(\d )/im.exec(id);
if (idMatch != null) {
const idNext = parseInt(idMatch[1]) 1;
const nextStep = $(`#step${idNext} textarea`);
if(nextStep.length){
if ($(this).val().length == 0 && $(nextStep).val().length == 0) {
$(`#step${idNext}`).css("display", "none");
} else {
$(`#step${idNext}`).css("display", "block");
}
}
}
})#step2,
#step3,
#step4,
#step5 {
display: none
}<div id="step1" class="step">
<label>step1</label>
<textarea></textarea>
</div>
<div id="step2" class="step">
<label>step2</label>
<textarea></textarea>
</div>
<div id="step3" class="step">
<label>step3</label>
<textarea></textarea>
</div>
<div id="step4" class="step">
<label>step4</label>
<textarea></textarea>
</div>
<div id="step5" class="step">
<label>step5</label>
<textarea></textarea>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/504999.html
標籤：jQuery
上一篇：僅當它以前存在時才再次添加類