前端——对循环加载出来的多个控件进行判空

﹏ヽ暗。殇╰゛Y 2022-04-23 05:48 135阅读 0赞

# <table>   <tbody>    <tr>     <td align="left"><font>*前言</font></td>    </tr>   </tbody>  </table> #

前几天小菜在写前端的过程中遇到了这样头疼的问题：好多个相同的控件是根据选择条件值进行循环加载的，表单提交时就需要对这些多个id相同的控件进行判空，有点小难度，好在与同伴交流思路后解决了问题，下面小菜进行简单分享！

# <table>   <tbody>    <tr>     <td align="left"><font>*思路</font></td>    </tr>   </tbody>  </table> #

1、需求：  
   就如前言所说，下图中右边的时间控件是根据左边的频次类型和频次值进行加载的，频次值是几就加载几行，在表单进行提交时我们就需要对右边的多个控件进行判空。如何做呢？

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dobTE4MzIyMzk0NzI0_size_16_color_FFFFFF_t_70]

2、思路：  
  
  用一个div标签将右边的控件包起来，并设置class属性，然后利用class属性+jQuery的each()方法进行便历判空。

# <table>   <tbody>    <tr>     <td align="left"><font>*实操</font></td>    </tr>   </tbody>  </table> #

1、HTML

2、循环加载控件

//-------根据rateType（频次类型）和rateValue（频次值）的改变循环加载控件
      
       $("[name='rateValue'],[name='rateType']").on("change", function () {
            $("[rate='diy']").remove()
            var c = $("[name='rateValue']").val() - 0;
            var t = $("[name='rateType']").val()
            for (; c > 0; c--) {
                var $item = $("[item='rate" + t + "']").clone()
                $item.attr("rate", "diy")
                if (c % 2 == 1) {
                    $item.css("background-color", "#f9f9f9")
                }
                $item.removeAttr("item");
                $item.appendTo($("[item='rate" + t + "']").parent())
                $("[date-format]", $item).each(function () {
                    var $that = $(this)
                    $that.datepicker({
                        format: $that.attr("date-format"),
                        autoclose: true,
                        inputMask: true,
                        language: 'zh-CN'
                    });
                })
    
                $("[time-format]", $item).each(function () {
                    var $that = $(this)
                    $that.timepicker({
                        format: $that.attr("time-format"),
                        autoclose: true,
                        inputMask: true,
                        language: 'zh-CN'
                    });
                })
                $item.show();
            }
    
        });

3、使用each遍历判空

> 温馨提示：  
>   
> 1、index：控件行数（ps:小菜发现一个问题，在调试的过程中发现控件行总是会比频次值多加载出来一行，但是页面上显示的是对的，页面上显示的是加载出来的代码的第二行。）  
>   
> 2、eq()：eq的值是每行中的input控件的个数  
>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dobTE4MzIyMzk0NzI0_size_16_color_FFFFFF_t_70]: /images/20220323/7793c3e9707b430798936bba4b6923e6.png