如何在jQuery中重构一堆属性赋值?

时间:2014-04-15 09:32:18

标签: javascript jquery refactoring

我有一堆jQuery片段,用于在点击字段时将相应的工具提示分配到特定字段,

$('#callerfirst').attr('title', 'May I have your first name?');
    $('#callerlast').attr('title', 'May I have your last name?');
    $('select[name="carriername"]').attr('title','May I have your wireless provider?');
    $('select[name="csrcallerrelationship"]').attr('title','May I have your relationship to the account holder?');
    $('#accountholder_firstname').attr('title','May I have the first name on the account?');
    $('#accountholder_lastname').attr('title','May I have the last name on the account?');
    $('input[name="contactphone"]').attr('title','May I have a phone number where you can be reached?');
    $('input[name="contactphone2"]').attr('title','May I have a phone number where you can be reached?');
    $('#email').attr('title','With your email address, we will send you an email confirming your claim and another from UPS with your tracking information.');
    $('input[name="address1"]').attr('title','May I have the address on the account?');
    $('select[name="cemake"]').attr('title','May I have the make of your phone?');
    $('select[name="cemodel"]').attr('title','May I have the model of your phone?');
    $('input[name="incidentdate"]').attr('title','May I please have the date on which the incident occured?');
    $('input[name="ccholdername"]').attr('title','May I have the name as it appears on the card?');
    $('input[name="ccmask"]').attr('title','May I have the card number?');
    $('input[name="cvvcode"]').attr('title','May I have the 3 or 4 digit CVV code on the back of the card?');
    $('input[name="billaddress1"]').attr('title','Please provide your billing address.');
    $('input[name="shipaddress1"]').attr('title','May I have the address you want the phone shipped to?');

//Trigger for activating Tooltips
    $('input[title]').tooltip();
    $('select[title]').tooltip({
        events: {
            widget:"focus,blur"
        }
    });

    $('.tooltip').livequery(function() {
        $(this).each(function() {
            $(this).bgiframe();
        });
    });

现在我该如何折射上面的代码片段以获得更好的优化或简单的单词如何减少冗余呢?

任何帮助都将不胜感激。

1 个答案:

答案 0 :(得分:2)

除了将评论建议的属性移动到HTML标记之外,您还可以改进代码:

var dictionary = {
    '#callerfirst' : 'May I have your first name?',
    '#callerlast' : 'May I have your last name?',
    'select[name="carriername"]' : 'May I have your wireless provider?',
    'select[name="csrcallerrelationship"]' : 'May I have your relationship to the account holder?'
    ...
    ...
};

$.each(dictionary, function(key, value){
    $(key).attr('title', value);
});

这样做的好处是,如果你需要将文本放在除title属性之外的元素中的其他位置,那么这是一个更改,而不是很多。 attr()重复被删除。