2016-12-03 59 views
0

我得到遗漏的类型错误:无法读取属性未定义的“分裂”(...)遗漏的类型错误:无法读取的不确定(...)财产“分割”

这里是我的jQuery代码:

(function($) { 
    "use strict"; 

    $('.tk-input').on('change', function(e){ 
    var $umargin = $(this).parent(); 
    var temp = ''; 
    $umargin.find('.tk-input').each(function(input_index, input){ 
     var margin_property = $(input).attr('data-property'); 
     var input_value = $(input).val(); 
     if(input_value != '') 
     { 
      if(input_value.match(/^[0-9]+$/)) 
       input_value += 'px'; 
      temp += 'margin-'+margin_property+':'+input_value+';'; 

     } 
    }); 
    $umargin.find('.tk-margin-value').val(temp); 
}); 
$('.tk-margin-values').each(function(index, element){ 
    var $umargin = $(this); 
    var tk_margin_value = $umargin.find('.tk-margin-value').val(); 
    console.log($umargin.find('.tk-margin-value').val()); 
    if(tk_margin_value != '') 
    { 

     var vals = tk_margin_value.split(';'); 

     $.each(vals, function(i,vl){ 
      if(vl != '') 
      { 
       var splitval = vl.split(':'); 
       var margin_value = splitval[1]; 
       var param = splitval[0].split('-'); 
       var margin_property = param[1]; 
       $umargin.find('.tk-input').each(function(input_index, input){ 
        var input_margin_property = $(input).attr('data-property'); 
        if(margin_property == input_margin_property) 
         $(input).val(margin_value); 
       }); 
      } 
     }) 
    } 
}); 

})(jQuery); 

这是我的HTML代码

<div class="tk-margin-values"> 
        <input name="tk_margin_top" data-property="top" class="value-margin-top tk-input '. esc_attr($settings['param_name']) .' '. esc_attr($settings['type']) .'_field" type="text" value="' . esc_attr($top_val) . '"> 
       <input name="tk_margin_right" data-property="right" class="tk-value-margin-right tk-input '. esc_attr($settings['param_name']) .' '. esc_attr($settings['type']) .'_field" type="text" value="' . esc_attr($right_val). '"> 

       <input name="tk_margin_bottom" data-property="bottom" class="tk-value-margin-bottom tk-input '. esc_attr($settings['param_name']) .' '. esc_attr($settings['type']).'_field" type="text" value="'. esc_attr($bottom_val).'"> 

       <input name="tk_margin_left" data-property="left" class="tk-value-margin-left tk-input '. esc_attr($settings['param_name']) .' '. esc_attr($settings['type']).'_field" type="text" value="' . esc_attr($left_val). '">'; 

    //$pieces = array($margin_property, $top_val, $right_val, $bottom_val, $left_val); 
    //$values = implode('||', $pieces); 
    <input type="text" name="'. esc_attr($settings['param_name']) .'" class="tk-margin-value wpb_vc_param_value wpb-input '. esc_attr($settings['param_name']).' '. esc_attr($settings['type']) .'_field" value="'. esc_attr($value) .'" '. $dependency .' />';  

    </div> 

$值在数据库中保存的价值,目前'margin-top:10px;margin-right:10px;'保存在$值变量。

我不明白为什么$ umargin.find('。tk-margin-value').val()是为什么在控制台日志中未定义,为什么会出现此错误“Uncaught TypeError:无法读取属性'split'未定义的(......)”

+0

有可能$(this)的值误导你。你有没有在你的事件处理程序中检查$(this)的值?它可能不是你认为这是因为事件冒泡的因素。它是否会返回您期望的值? – Hendeca

+0

@Hendeca console.log($(this))// result> [div.tk-margin-values context:div.tk-margin-values selector:“”] [div.tk-margin-values context:div。 tk-margin-values选择器:“”] –

+0

@亨德卡是的,你是对的我找到了2个块。我还有一个类.tk-margin-value,只是重命名。 –

回答

1

更新

它现在的工作

,或者你可以检查if ($('.tk-margin-values').length))长像下面

 $(document).ready(function(){ 
      "use strict"; 

      $('.tk-input').on('change', function(e){ 
      var $umargin = $(this).parent(); 
      var temp = ''; 
      $umargin.find('.tk-input').each(function(input_index, input){ 
       var margin_property = $(input).attr('data-property'); 
       var input_value = $(input).val(); 
       if(input_value != '') 
       { 
        if(input_value.match(/^[0-9]+$/)) 
         input_value += 'px'; 
        temp += 'margin-'+margin_property+':'+input_value+';'; 

       } 
      }); 
      $umargin.find('.tk-margin-value').val(temp); 
     }); 

     if ($('.tk-margin-values').length) { 
      $('.tk-margin-values').each(function(index, element){ 
       var $umargin = $(this); 
       var tk_margin_value = $umargin.find('.tk-margin-value').val(); 
       console.log($umargin.find('.tk-margin-value').val()); 
       if(tk_margin_value != '') 
       { 

        var vals = tk_margin_value.split(';'); 

        $.each(vals, function(i,vl){ 
         if(vl != '') 
         { 
          var splitval = vl.split(':'); 
          var margin_value = splitval[1]; 
          var param = splitval[0].split('-'); 
          var margin_property = param[1]; 
          $umargin.find('.tk-input').each(function(input_index, input){ 
           var input_margin_property = $(input).attr('data-property'); 
           if(margin_property == input_margin_property) 
            $(input).val(margin_value); 
          }); 
         } 
        }) 
       } 
      }); 
     } 
     }); 

工作小提琴fiddle link

+0

错误$ html没有被删除,所有的html块都被打印出来。 $ html不是问题。我得到了同样的错误,如果($('。tk-margin-values')。length) –

+0

检查这个小提琴。它的工作现在https://jsfiddle.net/gnanavelr/70vwp8Lp/ – vel

+0

调试事件处理程序'$ this'后,我发现'$ this'在html文件中获取另一个'.tk-margin-class'。我将班级名称改为现在的班级名称。 –

相关问题