循環使用JavaScript在基於HTML的id

如果我有與infinite其具有輸入類型複選框的表。每個複選框都標有id，例如。＃DET1，＃DET2，＃DET3我怎麼會寫我的JS循環來檢查，如果某些複選框被選中來執行它的功能，而無需編寫出每個id，因爲這id也被遞增基於產品上傳因此每個上傳的產品只會給ID加1，最後我可以坐着ID分配。循環使用JavaScript在基於HTML的id

的JavaScript的作品手動添加ID：

$('#details1, #details2').on('change', function(){ 
    var row = $(this).closest('tr').next('tr'); 
    if ($(this).prop('checked')) { 
     $(row).show(); 
    } 
    else { 
     $(row).hide(); 
    } 
});

這樣的作品，但因爲有這麼多的id的基礎上我tr「SI只想做一個循環，並檢查該id存在（ 它可能是ID = #details999），如果它確實做到功能on.change。

（每個產品生病的上傳ID加1就如：產品1 = #details1，產品2 = #details2，等...）

有可能是執行的想法，但作爲即時通訊更好的辦法新手我願意接受任何建議。

我想什麼：

for (var i = 0; i < ?; i++) { 
    $('#details'+ i).on('change', function(){ 
    var row = $(this).closest('tr').next('tr'); 
    if ($(this).prop('checked')) { 
     $(row).show(); 
    } 
    else { 
     $(row).hide(); 
     } 
    }) 
    }

我知道?意味着什麼，但我意識到我不能設置限制也不想一個無限循環，所以我有種被卡住。

來源

2017-09-30 Ylama

添加一個公共類的select元素，並用它來對付它們

<input type="checkbox" id="details1" class="details-checkbox"> 
<input type="checkbox" id="details2" class="details-checkbox"> 
<input type="checkbox" id="details3" class="details-checkbox">

然後用

$('.details-checkbox').on('change', function(){ 
    var row = $(this).closest('tr').next('tr'); 
    if ($(this).prop('checked')) { 
     $(row).show(); 
    } 
    else { 
     $(row).hide(); 
    } 
});

來源

2017-09-30 09:46:43

@Andreas oups :)固定。 –

結束了使用這個，因爲它感覺更安全的選擇..謝謝兄弟 – Ylama

我會用event delegation：

事件委派讓我們將一個事件監聽器附加到一個父元素上， r匹配選擇器的所有後代，無論這些後代是現在存在還是在將來添加到。

$('table').on('change', 'input[type="checkbox"]', function(e) { 
 
    var row = $(this).closest('tr').next('tr'); 
 

 
    $(row).toggle($(this).prop('checked')); 
 
})

tr.hidden { display: none }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table> 
 
    <tbody> 
 
    <tr><td>1</td><td><input type="checkbox" /></td></tr> 
 
    <tr class="hidden"><td colspan="2">Details 1</td></tr> 
 
    <tr><td>2</td><td><input type="checkbox" /></td></tr> 
 
    <tr class="hidden"><td colspan="2">Details 2</td></tr> 
 
    <tr><td>3</td><td><input type="checkbox" /></td></tr> 
 
    <tr class="hidden"><td colspan="2">Details 3</td></tr> 
 
    <tr><td>4</td><td><input type="checkbox" /></td></tr> 
 
    <tr class="hidden"><td colspan="2">Details 4</td></tr> 
 
    </tbody> 
 
</table>

來源

2017-09-30 09:51:15 Andreas

這將是更安全的'[ID^=「細節」]'添加到授權選擇，以避免其他複選框擦槍走火。 –

這將是一件需要考慮的事情（或者更好地使用您的答案中建議的常見類）。但是，因爲這僅僅是爲了提供一個可能的方式，而不是100％防彈解決方案，我將離開這個給TO :) – Andreas

好這個工作100％，因爲它想，對說明和解決方案，WIL非常感謝@Andreas對這個功能做更多的研究。 – Ylama

$('input:checkbox[id*=details ]').on('change',function(){ 
var row = $(this).closest('tr').next('tr'); 
if ($(this).prop('checked')) { 
    $(row).show(); 
} 
else { 
    $(row).hide(); 
    } 
});

來源

2017-09-30 09:51:28 Osama

循環使用JavaScript在基於HTML的id

回答

相關問題