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

}

Answer 2

可能是这样的：

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

Answer 3

怎么样：

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

如何简化我的Jquery代码

3 个答案: