문제

I have below bunch of jQuery snippets, which use to assign the respective tooltip to particular field on click on the field,

$('#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();
        });
    });

Now how can I refractor the above snippet for better optimization or simple words how to decrease the redundancy?

Any Help would be appreciated.

도움이 되었습니까?

해결책

Other than moving the attributes into the HTML markup as the comments suggest, you could improve the code:

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);
});

The benefit of this is if you need to put the text elsewhere in the element other than the title attribute, it's one change instead of many. The attr() repetition is removed.

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top