的jQuery綁定事件

Question

我編程使用jQuery面板，你可以在這裏看到：http://www.taoktalk.com/socialapps/baidu/taozhe/ 我的邏輯是：

1. 當我點擊每個buttonset，輸入元素的defaut值變化;
2. 每次在輸入元素中進行焦點時，該值都被清除;
3. 如果模糊輸出而不輸入任何內容，默認值被重新設置，但如果輸入一些單詞，則單詞是值。

方法「inputWithDefValue」實現邏輯2和3，但邏輯1，當我點擊按鈕組中，evnet「焦點」和「模糊」被遞增地結合，因此，「DEFVAL」變量是不正確的。 如何解決此問題，謝謝。

對於調試，我使用'alert（defVal）;'在重點evnet。

的javascrip代碼：

$(function() { 
    $("#tabs").tabs(); 

    var selectedTab = '' 
    $("#tabs").bind("tabsselect", function(event, ui) { 
     //selectedTab = ui.panel.id; 
    }); 
    $("#goods").buttonset(); 
    $("#shop").buttonset(); 

    var defaultInputVal = ''; 
    $('input[type=radio]').bind('click', function(){ 
      switch (this.id){ 
       case 'goods-url': 
        defaultInputVal = '輸入寶貝網址'; 
        break; 
       case 'goods-name': 
        defaultInputVal = '輸入寶貝名稱'; 
        break; 
       case 'goods-id': 
        defaultInputVal = '輸入寶貝編號'; 
        break; 
       case 'shop-url': 
        defaultInputVal = '輸入店鋪網址'; 
        break; 
       case 'shop-nick': 
        defaultInputVal = '輸入店鋪名稱'; 
        break; 
      } 
      $('input.input-search').val(defaultInputVal); //set default value of input.input-search element 
      $('input.input-search').inputWithDefValue(defaultInputVal); //excute inputWithDefValue method every time after click 
     }); 


    //excute inputWithDefValue method without click buttonset 
    $('input#input-goods').inputWithDefValue('輸入寶貝網址'); 
    $('input#input-shop').inputWithDefValue('輸入店鋪網址'); 
}); 

$.fn.extend({ 
    inputWithDefValue: function(defVal){ 
     this.bind('focus', function(){ 
      alert(defVal); //for debug purpose 
      if ($(this).val() == defVal) { 
       $(this).val('').css({ 
        'color': 'black' 
       }); 
      } 
     }); 

     this.bind('blur', function(){ 
      if ($(this).val() == '') { 
       $(this).val(defVal).css({ 
        'color': '#969696' 
       }); 
      } 
     }); 

    } 
}); 

Answer 1

恐怕你的代碼需要相當繁重的重構。使用您當前的實現，在每個單選按鈕上單擊您將更新和更新的函數綁定到模糊和焦點事件 - 這只是您的問題之一（儘管是最重的）。

由於您非常好地將您的需求放入有序列表中，顯然您需要綁定到三個事件：單擊按鈕，在輸入字段上對焦並模糊。這是一個很好的跡象，你就必須實現以下功能（無需使用.fn.extend $的）：

$('input[type=radio]').on('click', function() { ... }); 
$('input.input-search').on('focus', function() { ... }); 
$('input.input-search').on('blur', function() { ... }); 

所以正確的方法是宣佈你defaultInputVal一次，作爲對象，而不是一個字符串，像這樣：

var defaultInputVal = { 
    goods-url : '輸入寶貝網址', 
    goods-name : '輸入寶貝名稱', 
    ... 
}; 

基於任何輸入欄的ID，你可以很容易地獲取給定 字段的默認值。上述三個功能應該沿着線運行：

$('input[type=radio]').on('click', function() { 
    $('input.input-search').val(defaultInputVal[$(this).attr('id')]); 
}); 

$('input.input-search').on('focus', function() { 
    var selected_radio_id = $('input[type=radio]:checked').attr('id'); 
    if ($(this).val() == defaultInputVal[selected_radio_id]) { 
    $(this).val('').css({ 
     'color': 'black' 
    }); 
    } 
}).on('blur', function() { 
    var selected_radio_id = $('input[type=radio]:checked').attr('id'); 
    if ($(this).val() == '') { 
    $(this).val(defaultInputVal[selected_radio_id]).css({ 
     'color': '#969696' 
    }); 
    } 
}); 

代碼是未經測試，但應該指向你在正確的方向。還有很多需要改進的空間，比如不要在變量中亂扔全局名稱空間，但這可能是您需要採取的第一步。

Answer 2

您的擴展方法改成這樣一個

$.fn.extend({ 
    setAsDefault: function(defValue, undefined) { 
     this.each(function() { 
      var valueToUse = (defValue === undefined) ? this.value : defValue; 
      this.defaultValue = valueToUse; 
      this.value = valueToUse; 
     }); 
    }, 
    revertToDefault: function(optionalValue) { 
     return this.bind('focus', function() { 
      if (this.value == this.defaultValue) { 
       $(this).val('').css({ 
        'color': 'black' 
       }); 
      } 
     }).bind('blur', function() { 
      if (this.value == '') { 
       $(this).val(this.defaultValue).css({ 
        'color': '#969696' 
       }); 
      } 
     }).setAsDefault(optionalValue); 
    } 
}); 

它創造了兩個方法，一個是擴展對象的模糊反應和焦點事件，以及一個允許您設置的默認值。

的初始化使用

$('input.input-search').revertToDefault('輸入寶貝網址'); 

，併爲您的單選按鈕使用

$('input.input-search').setAsDefault(defaultInputVal); 

全部工作演示在http://jsfiddle.net/gaby/FETcS/