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模糊問題

回答

相關問題