jquery - 如何简化我的 Jquery 代码

Question

我正在努力让我的代码不那么难看。这里有很多if语句和重复代码。主要区别在于 insertBefore 和 prependTo 单独更改了几个 css 属性。有什么建议可以在这里简化我的代码吗？太感谢了。

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

Answer 1

这是我的看法:

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

}