我有一個動態輸入欄位，用戶可以使用“添加”按鈕添加任意數量的顏色。該陣列作業正常。帖子很好。我的問題是一些正則運算式匹配。基本上，如果用戶在正則運算式模式中輸入其中一種顏色，則會顯示帶有另一個輸入的 div 容器。這很好用。
問題：
- 用戶輸入“紫色”——不匹配，沒有顯示。好。
- 用戶輸入“blue”——匹配，div 顯示。用戶洗掉“藍色”div 消失。好。
- 用戶輸入“red”——匹配，div 出現。好。
- 用戶輸入“黃色”——不匹配，div 消失。不好。
匹配發生后，我需要 div 保持可見。但是，如果下一個輸入不匹配，它會洗掉 div。
$("#add").click(function(e){
$('input[name="item_color[]"]').keyup(function() {
var data = $(this).val();
var regx = /(blue|red|orange)/gmi;
if (data.match(regx)){
$("#divcolor").show();
}
else {
$("#divcolor").hide();
}
});
});
我試過洗掉
$("#divcolor").hide();
這有點管用。除非用戶回傳輸入并洗掉導致 div 最初顯示的匹配項，否則 div 將繼續顯示。
基本上我只需要它在任何輸入中出現任何匹配時顯示 div，如果沒有匹配出現則隱藏 div。我真的需要 div 在 keyup 上顯示/隱藏是最重要的事情。
任何幫助，將不勝感激。我敢肯定這很容易。我只是無法理解邏輯。
uj5u.com熱心網友回復：
您可以通過在每次呼叫處理程式時檢查所有輸入并將 var 設定為 true（如果匹配）來解決此問題：
let matches = false;
$('input[name="item_color[]"]').each(function() {
if ($(this).val().match(regx)){
matches = true;
}
});
此外，您在評論中提到的問題是，當您在添加處理程式之外定義事件處理程式時，事件處理程式不起作用，這與輸入不是在定義時創建的事實有關。為了防止它，您可以將事件偵聽器直接附加到主體，但向其添加一個選擇器：
$('body').on('keyup', 'input[name="item_color[]"]', function() {
然后事件偵聽器附加到一個存在的元素，并且在呼叫偵聽器之前不使用選擇器。
作業示例：
$("#add").click(function(){
$('#input-wrapper').append('<input name="item_color[]">');
});
$('body').on('keyup', 'input[name="item_color[]"]', function() {
let matches = false;
var regx = /(blue|red|orange)/gmi;
$('input[name="item_color[]"]').each(function() {
if ($(this).val().match(regx)){
matches = true;
}
});
if (matches){
$("#divcolor").show();
}
else {
$("#divcolor").hide();
}
});#divcolor {
display: none;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="add">Add</button>
<div id="input-wrapper">
<input name="item_color[]">
</div>
<div id="divcolor">
<p>div visible</p>
</div>轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/534759.html
標籤：网页格式查询
上一篇：出現彈出視窗時如何淡化背景