如何最小化jquery中的重複代碼？

-2

var profileIdDefault = "Profile ID"; 
    var organisationIdDefault = "Competitor ID"; 
    var FromDateDefault = "From Date"; 
    var ToDateDefault = "To Date"; 


    $("#startDate").focus(function() { 
     if ($(this).val() === FromDateDefault) { 
      $(this).attr("value", ""); 
     } 
    }); 
    $("#startDate").blur(function() { 
     if ($(this).val() === '') { 
      $(this).val(FromDateDefault); 
     } 
    }); 

    $("#endDate").focus(function() { 
     if ($(this).val() === ToDateDefault) { 
      $(this).attr("value", ""); 
     } 
    }); 
    $("#endDate").blur(function() { 
     if ($(this).val() === '') { 
      $(this).val(ToDateDefault); 
     } 
    }); 

    $("#profileID").focus(function() { 
     if ($(this).val() === profileIdDefault) { 
      $(this).attr("value", ""); 
     } 
    }); 
    $("#profileID").blur(function() { 
     if ($(this).val() === '') { 
      $(this).val(profileIdDefault); 
     } 
    }); 

    $("#organisationID").focus(function() { 
     if ($(this).val() === organisationIdDefault) { 
      $(this).attr("value", ""); 
     } 
    }); 
    $("#organisationID").blur(function() { 
     if ($(this).val() === '') { 
      $(this).val(organisationIdDefault); 
     } 
    });

來源

2013-04-25 Xerxes

什麼是你的HTML標記是什麼樣子？ – George 2013-04-25 08:36:44

應該在代碼評論中發佈 – lifetimes 2013-04-25 08:36:58

而你真正要問的是「如何重構這個jQuery代碼？」 – 2013-04-25 08:53:16

保持乾燥。例如：

function setup(id, toCompare) { 
    $(id).focus(function() { 
     if ($(this).val() === toCompare) { 
      $(this).attr("value", ""); 
     } 
    }).blur(function() { 
     if ($(this).val() === '') { 
      $(this).val(toCompare); 
     } 
    }); 
} 
setup("#startDate", FromDateDefault); 
setup("#endDate", ToDateDefault); 
setup("#profileID", profileIdDefault); 
setup("#organisationID", organisationIdDefault);

來源

2013-04-25 08:42:41 skuntsel

您正在通過$（id）進行2個DOM操作。您可以緩存$（id）變量或利用jquery的可鏈接屬性。它會爲您節省1個DOM操作。只是爲了使代碼更好.. Anyway很好的方法所以+1 :) – sachinjain024 2013-04-25 08:48:22

你可以做這樣的事情： -

function toggleValue(valToCompare) { 
    if ($(this).val() === valToCompare) { 
     $(this).attr("value", ""); 
    } else if ($(this).val() === '') { 
     $(this).val(valToCompare); 
    } 
} 

$("#startDate").focus(function() { 
    this.toggleValue(FromDateDefault); 
}).blur(function() { 
    this.toggleValue(FromDateDefault); 
});

可以爲元素的其餘部分做。

來源

2013-04-25 08:39:20 sachinjain024

不會工作，因爲'FromDateDefault'不是唯一使用的變量。你最好包括一個額外的參數。 – skuntsel 2013-04-25 08:44:29

您可以使用data屬性在元素中存儲一些數據。然後你可以測試與元素相關的值。例如...

<input id="startdate" class="focus-value" data-empty="From Date" /> 
<input id="enddate" class="focus-value" data-empty="To Date" />

中的jQuery ...

$(".focus-value").focus(function() { 
    if $(this).val() === $(this).data('empty') { 
     $(this).attr("value", ""); 
    } 
});

允許您將所有的焦點和模糊處理結合起來。

來源

2013-04-25 08:43:21

你也可以做到這一點簡單地說，通過使用placeholder

<input id="startdate" placeholder="From Date" /><br /> 
<input id="endDate" placeholder="To Date" /><br />

FIDDLE

來源

2013-04-25 08:47:24

但不適用於IE .. – Anujith 2013-04-25 08:48:50

我會用佔位符做它.. – sachinjain024 2013-04-25 08:51:58

這當然是最好的解決方案。但HTML5在任何地方都沒有提及，而且問題不是關於替代命題，而是關於代碼重構以排除重複性。 – skuntsel 2013-04-25 08:56:25

如何最小化jquery中的重複代碼？

回答

相關問題