如何處理與jquery具有陣列

Question

我有例如3個字段則該用戶可以輸入一個數A，B，C

所以C區域將檢查在C區域輸入的號碼是<一個和新字段>灣

在表單中我有一個按鈕，用於創建另一行 另一個a，b，c;所以我不知道如何控制像以前一樣操作...

FIDDLE

$(".c").change(function() { 

    if ($('.c').val() > $('.a').val() || $('.c').val() < $('.b').val()) { 
    $('.c').css("backgroundColor", "#ff0000"); 
    } else { 
    $('.c').css("backgroundColor", "#00FF00"); 
    } 
}); 


$('.add').click(function() { 

    var tr = '<tr>' + '<td>Cota1</td>' + 
    '<td><input type="text" name="tol_cota1[]" class="form-control a"></td>' + 
    '<td><input type="text" name="tolb_cota1[]" class="form-control b"></td>' + 
    '<td><input type="text" name="medido_cota1[]" class="form-control c"></td>' + 
    '<td><input type="button" class="btn btn-danger remove" value="Remove Line"></td>' + '</tr>'; 

    $('.details').append(tr); 


}); 

// delete row 
$('.details').delegate('.remove', 'click', function() { 
    var con = confirm("Are you sure you want to remove the line?"); 
    if (con) { 
    $(this).parent().parent().remove(); 
    } 
}); 

Answer 1

的change event不起泡，這意味着您將需要一個事件偵聽器來處理表單中的每個輸入。

jQuery將利用使用.on() method用的選擇器（第二個參數），到老棄用.delegate() method這相當於當自動照顧這一點。從它在官方的文檔說明，它會：

附加一個處理程序，以一個或多個事件的選擇相匹配的，現在或將來，基於一組特定的根元素的所有元素。

所以，如果你做這樣的事情：

$('.details').on('change', 'input', (event) => { ... }); 

這將監聽.details選擇匹配，無論這些已經存在的所有元素內的任何<input>元素change事件時，該方法被稱爲或者它們是事後創建的，因爲它是你的情況。現在

，一旦change事件發生時，你應該使用.parent()，.eq和.find()方法來選擇其中觸發事件的<input>所在的行，從那裏你根據自己的位置，或者選擇全部3個輸入，它們的價值，並根據你的邏輯來更新那個特定的行。

無論如何，如果您不使用change事件，而是使用input事件，那麼確實會出現泡泡，您可以從event delegation中受益。這意味着在這種情況下將爲整個<tbody>創建單個事件偵聽器，而不是每個<input>創建一個事件偵聽器。使用event.target您將能夠區分哪一個觸發了事件，您仍然需要使用該事件來獲取同一行中的其他輸入。

總之，它會是這個樣子：

// Better to keep the reference instead of getting it each time: 
 

 
const details = $('#details'); 
 

 
details.on('input', 'input', (event) => { 
 
    const children = $(event.target).parents().eq(1).children(); 
 
    const avgInput = children.eq(3).find('input'); 
 
    const max = parseInt(children.eq(1).find('input').val()); 
 
    const min = parseInt(children.eq(2).find('input').val()); 
 
    const avg = parseInt(avgInput.val()); 
 
    
 
    if (isNaN(max) ||isNaN(min)|| isNaN(avg)) { 
 
     // Don't do anything if any of them is blank. 
 
     
 
     return; 
 
    } 
 

 
    avgInput.css('backgroundColor', avg > max || avg < min ? '#ff0000' : '#00FF00'); \t \t 
 
}); 
 

 
details.on('click', '.remove', (event) => { 
 
    if (confirm('Are you sure you want to remove the line?')) { 
 
    $(event.target).parents().eq(1).remove(); 
 
    } 
 
}); 
 

 
$('#add').click(() => { \t \t \t \t \t 
 
    details.append(` 
 
    <tr> 
 
    <td>Cota1</td> 
 
    <td><input type="text"></td> 
 
    <td><input type="text"></td> 
 
    <td><input type="text"></td> 
 
    <td><button class="remove">DELETE</button></td> 
 
    </tr> 
 
    `); 
 
});

body { 
 
    font-family: sans-serif; 
 
    font-size: .75rem; 
 
} 
 

 
table { 
 
    border-collapse: collapse; 
 
    table-layout: fixed; 
 
    position: relative; 
 
} 
 

 
table th, 
 
table td { 
 
    width: 20%; 
 
    padding: 0; 
 
    border-bottom: 1px solid #EEE; 
 
    height: 1.75rem; 
 
} 
 

 
input { 
 
    width: 100%; 
 
    box-sizing: border-box; 
 
    padding: .5rem; 
 
    border: none; 
 
    outline: none; 
 
    text-align: center; 
 
} 
 

 
input:hover { 
 
    background: #FAFAFA; 
 
} 
 

 
input:focus { 
 
    background: #FFA; 
 
} 
 

 
.remove { 
 
    width: 100%; 
 
    box-sizing: border-box; 
 
    padding: .5rem; 
 
    border: none; 
 
    outline: none; 
 
    background: #FFF; 
 
    cursor: pointer; 
 
} 
 

 
.remove:hover { 
 
    background: #F44; 
 
} 
 

 
#add { 
 
    width: 100%; 
 
    border: none; 
 
    background: #FFF; 
 
    padding: .5rem; 
 
    border-radius: 2px; 
 
    color: #000; 
 
    text-transform: uppercase; 
 
    font-size: .75rem; 
 
    margin: 1rem 0 0; 
 
    box-shadow: 0 0 1rem rgba(0, 0, 0, .25); 
 
    transition: box-shadow ease-in .125s; 
 
} 
 

 
#add:hover { 
 
    box-shadow: 0 0 .5rem rgba(0, 0, 0, .25); 
 
}

<table> 
 
    <thead> 
 
    <tr> 
 
     <th> </th> 
 
     <th>TOL +</th> 
 
     <th>TOL -</th> 
 
     <th>AVG</th> 
 
     <th></th> 
 
    </tr> \t 
 
    </thead> 
 
    
 
    <tbody id="details"> 
 
    <tr> 
 
    <td>Cota1</td> 
 
    <td><input type="text"></td> 
 
    <td><input type="text"></td> 
 
    <td><input type="text"></td> 
 
    <td> </td> 
 
    </tr> 
 
    </tbody> 
 
</table> 
 

 
<button id="add">ADD</button> 
 
    
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 2

的最好的辦法是使用最近的功能

$(".c").change(function(){ 

     if($(this).val() > $(this).closest('.a').val() || $(this).closest('.c').val() < $('.b').val()) 
       { 
     $(this).closest('.c').css("backgroundColor", "#ff0000");  
       }else{ 
       $(this).closest('.c').css("backgroundColor", "#00FF00");   
       }   
     });