jQuery模糊问题

我遇到了我的表单代码问题。jQuery模糊问题

这是codepen：http://codepen.io/Dzongkha/pen/NbdadP

问题是这段代码：

jQuery('.form-container input, .form-container textarea').each(function() { 
    var labelLeft, labelTop; 

    labelTop = jQuery(this).css('padding-top'); 
    labelLeft = jQuery(this).css('padding-left'); 

    jQuery(this).next('label').css({ 
     'top': labelTop, 
     'left': labelLeft, 
    }); 

    jQuery(this).on('focus', function() { 
     jQuery(this).next('label').attr({ 
     'style': '', 
     }); 

     var leftProperty, topProperty,inputWidth; 
     leftProperty = jQuery(this).next('label').css('left'); 
     inputWidth = jQuery(this).css('width'); 
     topProperty = jQuery(this).next('label').css('top'); 

     if(leftProperty == inputWidth) { 
     jQuery(this).next('label').css({ 
      'left': labelLeft, 
     }); 
     }; 

     if(topProperty == '0px') { 
     jQuery(this).next('label').css({ 
      'top': labelTop, 
     }); 
     }; 
    }); 

    jQuery(this).on('blur', function() { 
     if(!jQuery(this).hasClass('active')) { 
     jQuery(this).next('label').css({ 
      'top': labelTop, 
      'left': labelLeft, 
     }); 
     } 
    }); 
    });

所以，如果我专注和模糊只是codepen页面上 - 一切正常，看起来像： proper variant。

但是，如果我通过打开新标签或其他程序，或与控制台，然后尝试着重于输入或textarea模糊，有这样的问题：issue variant。

我不知道，为什么，但在这种情况下，这部分代码：

  jQuery(this).next('label').attr({ 
      'style': '', 
      });

不会出于某种原因。

我已经尝试过：

1）

jQuery(this).next('label').css({ 
     'top': '', 
     'left': '' 
     });

2）

jQuery(this).next('label').removeAttr('style');

但在这两种情况下出现了这个问题。

希望有解决我的问题=（

预先感谢您！

来源

2016-11-19 Nat Davydova

尝试找到你的HTML – karthick

检查''标签标签我试过，但它并没有在所有 – prasanth

@karthick（“标签”），而不是下一个（“标签”） –

你的代码是一个有点混淆，我想你要多少代码做简单的东西。你有办法一些js代码是重叠的，这就是为什么你的bug。

你有devtools（控制台）的错误，因为你强制一个状态，当这种情况发生时，js无法识别修改，这就是为什么样式填充不会改变。

我还是不明白为什么你有这么简单的js代码，我建议你只用css重构代码，它可以解决问题。否则，我想我不能帮你。

我的解决方案不是最好的，但它的工作原理是，在css的顶部和左侧属性中添加!important。

#example-3.form-container input:focus + label, 
#example-3.form-container input.active + label, 
#example-3.form-container textarea:focus + label, 
#example-3.form-container textarea.active + label { 
    top: 1px !important; 
    left: 1px !important; 
    padding: 20px; 
    background-color: #f04c1e; 
    color: #fff; 
}

而且，你必须在jQuery的代码，你可以仅由$美元符号$更换。

http://codepen.io/sandrina-p/pen/qqRVNw

来源

2016-11-19 12:52:03

看。我试图解释这个js是更大项目的一部分。我有近20-25种不同的形式，具有不同的效果，我需要解决这个确切的任务，为他们添加更多的功能（不仅仅是这种形式）。这个任务只是新事物的一个步骤，我不能用CSS重要的属性替换它。我只需要解决这个确切的错误，而不是改变这个效果的CSS文件。 –

我明白了。你在控制台上遇到了这个bug，因为你正在强制一个状态，当发生这种情况时，js不能识别修改，这就是为什么样式填充没有改变。我仍然不明白为什么你有这么简单的js代码，我建议你只用css重构代码，它可以解决问题。否则，我想我不能帮你。 –

jQuery模糊问题

回答

相关问题