CODEWITHSUNDEEP
jquerycss
FlyingCat
FlyingCat

Reputation: 14260

How to simplify my Jquery codes

I am trying to make my codes less ugly. There are many if statement and repeating codes here. The main difference is insertBefore and prependTo alone with few css property changed. Are there any suggestions to simplify my codes here?? Thanks a million. 

if($element.closest('div').hasClass('links')){
    $(document.createElement('img'))
        .attr({src:'inc/images/bubble_anim.gif',  'class': 'helpImg'})
        .insertBefore($element)
        .css({'position':'absolute',
            'z-index':99,
            'top': topPos+30,
            'left': leftPos
         })

     return true;
 }

 if($element.attr('id')=='option'){
     $(document.createElement('img'))
         .attr({src:'inc/images/bubble_anim.gif',  'class': 'helpImg'})
         .prependTo($element)
         .css({ 'z-index':99  })

     return true;
 }           

 //if the element is a td element, using propendTo method.
 if($element.is('td')){
     $(document.createElement('img'))
     .attr({src:'inc/images/bubble_anim.gif',  'class': 'helpImg'})
     .prependTo($element)
     .css({'position':'absolute',
         'z-index':99,
         'top': topPos,
         'left': leftPos
     })

     return true;
}

//regular elements...
$(document.createElement('img'))
    .attr({src:'inc/images/bubble_anim.gif',  'class': 'helpImg'})
    .insertBefore($element)
    .css({'position':'absolute',
        'z-index':99,
        'top': topPos,
        'left': leftPos
    })

Upvotes: 2

Views: 152

Answers (3)

aquinas
aquinas

Reputation: 23796

How about:

var img = $("<img src='inc/images/bubble_anim.gif' class='helpImg'>");

var css = {'position':'absolute',
           'z-index':99,
           'top': topPos,
           'left': leftPos
};

if($element.attr('id')=='asmnt_option_label_q_count'){
    $img.prependTo($element).css({ 'z-index':99})
}
else if($element.is('td')){
    $img.prependTo($element).css(css);
}
else{      
    css.top += ($element.closest('div').hasClass('sub_links')) ? 30 : 0;         
    img.insertBefore($element).css(css)​;
}
​

Upvotes: 0

adeneo
adeneo

Reputation: 318212

Maybe something like :

$('<img />', {src: 'inc/images/bubble_anim.gif', 'class': 'helpImg'})
    [($element.attr('id')=='asmnt_option_label_q_count'||$element.is('td'))?'prependTo':'insertBefore']($element)
    .css({
        zIndex: 99,
        position: $element.attr('id')=='asmnt_option_label_q_count'?'static':'absolute',
        top: $element.closest('div').hasClass('sub_links')?topPos+30:$element.attr('id') == 'asmnt_option_label_q_count'?'':topPos,
        left: $element.attr('id') == 'asmnt_option_label_q_count'?'':leftPos
    });
​return true;

Upvotes: 0

user415715
user415715

Reputation:

Here's my take on it:

<style>
    .helpImg{
        position: absolute;
        z-index: 99;
    }   
</style>

var image = $("<img src='inc/images/bubble_anim.gif' class='helpImg'>");

if ($element.closest('div').hasClass('sub_links')) {

    image.css({
       'top': topPos+30,
       'left': leftPos
    }).insertBefore($element);

} else if ($element.attr('id')=='asmnt_option_label_q_count') {

    image.prependTo($element);          

} else {

    image.css({
        'top': topPos,
        'left': leftPos
    }).prependTo($element);

}

Upvotes: 1

Related Questions