Question

   (function( $ ) {
     $(document).ready( function(){
       $('form.wpcf7-form input').each(function(){
         //or you could also do this which is even less maintenance
         var name = $(this).attr('name').substring(0, 10);
         var type = $(this).attr('type');
         switch(type){
           case 'radio':
            case 'checkbox': 
             name += '-'+$(this).attr('value');
         }
         $(this).attr('class',name);
       });
     });
   })( jQuery );

我尝试删除班级名称，但收到Uncaught TypeError: Cannot read property 'substring' of undefined错误。

有人可以帮我修复此错误吗？

谢谢！

Answer 1

由于这是WordPress和联系表格7，我认为某些HTML不受你的控制。

根据名称添加一个类会给您留下想要针对这些输入做一些样式的印象。您是否知道可以根据名称设置样式，而无需添加类？例如，对于名为“first-name”的文本输入，您可以在CSS中执行此操作：

input[type="radio"][name="first-name"] {
    border-color: red;
}

如果那不能满足您的需求（并回答您提出的直接问题），那么您需要做一个条件，这样就不会抛出此错误：

// simplify to a single no-conflict safe document-ready
jQuery( function( $ ) {
    $('form.wpcf7-form input').each( function() {
        if ( $(this).attr('name') ) {   
             var name = $(this).attr('name').substring(0, 10);
             var type = $(this).attr('type');
             switch(type) {
                 case 'radio':
                 case 'checkbox': 
                     name += '-'+$(this).attr('value');
             }

             $(this).attr('class',name);
        }
    } );
} );

Answer 2

正如有几个人评论的那样，你会得到undefined的错误，因为你页面上的一个输入元素没有name属性。这会破坏脚本并阻止它运行。

您必须进行条件检查才能查看name属性是否存在。像这样的东西会起作用：

$('form.wpcf7-form input[type="checkbox"]').each(function() { 
    $(this).addClass( ( ( $(this).attr('name') ) ? $(this).attr('name').substring(0, 10) + '-' + $(this).val() : null ) );  
});

获取未捕获的TypeError：无法读取未定义的属性“substring”

2 个答案: