如何将 60 个类似的 jquery 函数组合成一个 function？

Question

我有一个页面，它本质上是一个巨大的清单。 如果您点击按钮来编辑清单项目，则会弹出一个模式。 在此模式下，如果在检查期间检测到问题，则向 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 很陌生，所以请原谅我的无知。 两天后，这是我想出的让它在页面刷新后仍然有效的方法。

当然，必须有比我在这里做的更清洁的方法。

Answer 1

您可以将通用 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/

Answer 2

您可以在 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');
});

类似的东西。