如何最小化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中的重复代码？

回答

相关问题