[英]How can I combine 60 similar jquery functions into a single function?
我有一個頁面,它本質上是一個巨大的清單。 如果您點擊按鈕來編輯清單項目,則會彈出一個模式。 在此模式下,如果在檢查期間檢測到問題,則向 select 發送無線電。 如果選擇yes,則會顯示一個隱藏的div,以便在提交之前插入更多信息。
這是一個示例模式,目前頁面上有 60 個。
<!-- modal window for submiting check-->
<div id="edit3" class="text-left g-max-width-800 g-bg-white g-overflow-y-auto g-pa-20" style="display: none;">
<button type="button" class="close" onclick="Custombox.modal.close();"><i class="hs-icon hs-icon-close"></i></button>
<h4 class="g-mb-20">Update Record for Empirix->SIP:500 Baseline</h4>
<form action="actions.php" method="POST">
<!-- Checkbox -->
<div class="g-mb-15">
<label class="form-check-inline u-check g-pl-25 ml-0 g-mr-25">
<input class="g-hidden-xs-up g-pos-abs g-top-0 g-left-0" name="issue3" type="radio" value="0" checked="">
<div class="u-check-icon-radio-v4 g-absolute-centered--y g-left-0 g-width-18 g-height-18">
<i class="g-absolute-centered d-block g-width-10 g-height-10 g-bg-primary--checked"></i>
</div>
No Issues
</label>
<label class="form-check-inline u-check g-pl-25 ml-0 g-mr-25">
<input class="g-hidden-xs-up g-pos-abs g-top-0 g-left-0" name="issue3" type="radio" value="1">
<div class="u-check-icon-radio-v4 g-absolute-centered--y g-left-0 g-width-18 g-height-18">
<i class="g-absolute-centered d-block g-width-10 g-height-10 g-bg-primary--checked"></i>
</div>
Issue Found
</label>
</div>
<input type="hidden" name="action" value="subcheck">
<input type="hidden" name="id" value="3">
<div id="ifYes3" class="g-mb-15 desc3" style="display:none">
<div class="form-group g-mb-20">
<label class="g-mb-10" for="inputGroup1_1">INC Ticket</label>
<input id="inputGroup1_1" class="form-control form-control-md rounded-0" type="text" placeholder="INC Ticket #" name="inc_tick">
</div>
<div class="form-group g-mb-20">
<label class="g-mb-10" for="inputGroup2_1">Brief Description</label>
<textarea id="inputGroup2_1" class="form-control form-control-md g-resize-none rounded-0" rows="3" name="problem" placeholder="If you found an issue, please provide a short overview."></textarea>
</div>
</div>
<div align="right">
<button type="submit" class="btn u-btn-primary g-mr-20 g-mb-1">Submit</button>
</div>
</form>
</div>
<!-- End modal window -->
然后,我有這個 ajax 代碼來執行刷新,你會注意到我在這里為 60 個 div 的每一個都有一個 jq 切換。
var interval = 10000; //number of mili seconds between each call
var refresh = function() {
$.ajax({
url: "ops_controller.php",
cache: false,
success: function(html) {
$("[name=issue1]").click(function(){
$('.desc1').toggle();
$("#ifYes1-"+$(this).val()).show('slow');
});
<!-- Cut out 58 similar functions -->
$("[name=issue59]").click(function(){
$('.desc59').toggle();
$("#ifYes59-"+$(this).val()).show('slow');
});
$("[name=issue60]").click(function(){
$('.desc60').toggle();
$("#ifYes60-"+$(this).val()).show('slow');
});
$('#table-refresh').html(html);
setTimeout(function() {
refresh();
}, interval);
}
});
};
refresh();
然后我在另一個 function 中有相同的代碼(60 個 jq 函數)
$( document ).ajaxStop(function() {
$.HSCore.components.HSModalWindow.init('[data-modal-target]');
$.HSCore.components.HSPopup.init('.js-fancybox', {
btnTpl: {
smallBtn: '<button data-fancybox-close class="btn g-pos-abs g-top-25 g-right-30 g-line-height-1 g-bg-transparent g-font-size-16 g-color-gray-light-v3 g-brd-none p-0" title=""><i class="hs-admin-close"></i></button>'
}
});
$('[data-toggle="tooltip-show"]').tooltip('show');
$("[name=issue1]").click(function(){
$('.desc1').toggle();
$("#ifYes1-"+$(this).val()).show('slow');
});
<!-- cut out 58 other items -->
$("[name=issue59]").click(function(){
$('.desc59').toggle();
$("#ifYes59-"+$(this).val()).show('slow');
});
$("[name=issue60]").click(function(){
$('.desc60').toggle();
$("#ifYes60-"+$(this).val()).show('slow');
});
});
});
我這樣做的原因是,此切換將在負載和 ajax 頁面每 10 秒刷新一次時起作用。 我對 jQuery/AJAX 很陌生,所以請原諒我的無知。 兩天后,這是我想出的讓它在頁面刷新后仍然有效的方法。
當然,必須有比我在這里做的更清潔的方法。
您可以將通用 function 與事件委托¹結合使用 - 請參見以下示例:
// [name^=issue] will target elements whose [name] attributes begins with "issue"
$(document).on("click", "[name^=issue]", function() {
var issueNo = this.name.replace("issue", "");
$(".desc" + issueNo).toggle();
$("#ifYes" + issueNo + "-" + $(this).val()).show("slow");
})
您可以在 HTML 中為您要包裝的每個項目設置一個數據屬性 - 基本上您需要一種方法來獲取每個項目的當前 ID,然后從中構建您的 jquery 選擇器。
<div class="myrow" data-rowID="1">
<input class="g-hidden-xs-up g-pos-abs g-top-0 g-left-0" name="issue1" type="radio" value="1">
</div>
<div class="myrow" data-rowID="2">
<input class="g-hidden-xs-up g-pos-abs g-top-0 g-left-0" name="issue2" type="radio" value="1">
</div>
<div class="myrow" data-rowID="3">
<input class="g-hidden-xs-up g-pos-abs g-top-0 g-left-0" name="issue3" type="radio" value="1">
</div>
$(".myrow input[type=radio]").click(function(){
// ok what number is this row?
var myRowID = $(this).attr('data-rowID');
$('.desc'+ myRowID ).toggle();
$("#ifYes" + myRowID + "-"+$(this).val()).show('slow');
});
類似的東西。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.