javascript - 如何将 60 个相似的 jquery 函数组合成一个函数？

Question

我有一个页面，本质上是一个巨大的 list 。如果您点击按钮编辑 list 项目，则会弹出一个模式。在此模式下，有一个 radio 用于选择在检查过程中是否检测到问题。如果选择 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();

然后我在另一个函数中有相同的代码(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 很陌生，所以请原谅我的无知。两天后，这就是我想出的方法，使其在页面刷新后仍然可以工作。

当然，必须有比我在这里所做的更干净的方法。

Answer 1

您可以将通用函数与事件委托(delegate)结合使用 - 请参阅下面的示例:

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

<小时/>

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