jQuery插件循環通過兄弟姐妹

Question

我是新來編寫jQuery插件，所以我有點不確定如何做到這一點。該插件將標籤顯示爲文本和密碼輸入內的提示。這很簡單 - 在元素焦點上，標籤是隱藏的。同樣在文檔加載時，它會檢查瀏覽器是否已自動完成任何字段格式 - 如果是，則隱藏該標籤。我遇到的問題是其他字段的自動填充。爲了解決這個問題，我試圖將一個函數綁定到元素的onblur和keyup事件，以循環其他表單元素並確定它們是否已經自動完成。

這是註釋的代碼。

(function($){ 
    $.fn.innerLabels = function() { 
    return this.each(function() {   
    var $this = $(this); 
// Initialise all form elements with class 
    $this.each(function() { 
    var lngth = $(this).val().length; 
    if(lngth > 0){ 
     $(this).parent().children('label').hide(); 
    }else{ 
     $(this).parent().children('label').show(); 
    }; 
    }); 
// onfocus event - clears label 
    $this.focus(function() { 
    $this.parent().children('label').hide(); 
    }); 
// onblur/keyup event re-enstates label if length of value is zero or hides if autocompleted. 
    $this.bind("blur keyup",function() { 
// check all fields in case of autocomplete <- this is the problem 
    $(this).each(function() { 
    var lngth = $(this).val().length; 
    //alert(lngth); 
    if(lngth > 0){ 
     $(this).parent().children('label').hide(); 
    }else{ 
     $(this).parent().children('label').show(); 
    }; 
    }); 
    }); 
    }); 
    }; 
})(jQuery); 

這是通過這樣做觸發的。

$(document).ready(function(){ 
    $('.txtbox').innerLabels(); 
}); 

.txtbox是我添加的一個類，用於形成我想要使用它的文本和密碼字段。

我認爲這是一個範圍問題。最後一個$（this）.each是問題所在。與使用.txtbox類循環所有元素不同，它循環處理髮生事件的輸入值。我不想將類名添加到插件中，因爲它會添加額外的代碼並使其不夠靈活。

任何意見，將不勝感激。

乾杯

格雷格

Answer 1

只要看你的代碼，它看起來像你試圖在模糊再次執行初始化代碼。是這樣嗎？如果是這樣，那重構普通代碼的功能和簡單地從你的事件處理程序調用它：

(function($) { 
    $.fn.innerLabels = function() { 
     var $self = this; 
     var hideElements = function() { 
      $self.each(function() { 
       var lngth = $(this).val().length; 
       if (lngth > 0) { 
        $(this).parent().children('label').hide(); 
       } else { 
        $(this).parent().children('label').show(); 
       }; 
      }); 
     }; 

     hideElements(); 

     return $self.focus(function() { 
      $(this).parent().children("label").hide(); 
     }).bind("blur keyup", hideElements); 
    }; 
})(jQuery); 

一些重構之後，我還沒有看到爲.each調用（在return語句）的需要，因爲分配事件處理程序將適用於匹配元素集合中的每個項目。

希望這就是你以後的樣子。

Answer 2

在jQuery中您可以使用next（）函數

$(this).next() 

將選擇下一個選擇的兄弟姐妹。

More on next()