簡體   English   中英

如何將 60 個類似的 jquery 函數組合成一個 function?

[英]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");
})

¹ https://learn.jquery.com/events/event-delegation/

您可以在 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.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM