如何简化我的jQuery代码

我想让我的代码不那么丑陋。这里有很多if语句和重复代码。主要区别在于insertBefore和prependTo单独更改了几个css属性。有没有任何建议来简化我的代码？太感谢了。如何简化我的jQuery代码

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

来源

2012-08-23 FlyingCat

如果您的IFS在别的IFS，还是你真的需要对每一个进行评估，因为这会对是否产生重大影响s可以简化吗？ – aquinas

我确实需要那些返回真实的声明... – FlyingCat

啊，对，我的眼睛掩盖了真实的回报。好的，那么他们可以是其他ifs。 – aquinas

如何：

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

来源

2012-08-23 00:44:33 aquinas

也许是这样的：

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

来源

2012-08-23 00:25:04 adeneo

这是我对此采取：

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

}

来源

2012-08-23 00:28:41 Akinos

如何简化我的jQuery代码

回答

相关问题