0

我试图简化下面的代码，使它们不那么难看。有没有更好的方法来做到这一点？非常感谢。

//the only difference is the append and after method after the $element.
     if($element.is('td')){
            $element.append(
                  $(document.createElement('div')).attr({'id': tooltipId}).addClass('js-tutorialTooltips').css({
                      'position': 'absolute',
                      'z-index':'9999', 
                      'color':'white',
                      'background-color': 'rgba(0, 0, 0, 0.8)',
                      'border': '1px solid #cccccc',
                      'border-radius': '0.5em',
                      'box-shadow': '0 0.2em 0.2em #111'})
                    .append(
                      $(document.createElement('div')).css({'padding': '0.5em 1em'}).html(text) //for more tool info add the following + '<br/>(' + verticalPosition + '-' + horizontalPosition + ':' + domId + ')'
                   )
                )
        }else{
            $element.after(
                      $(document.createElement('div')).attr({'id': tooltipId}).addClass('js-tutorialTooltips').css({
                        'position': 'absolute',
                        'z-index':'9999',
                        'width':'300px',
                        'color':'white',
                        'background-color': 'rgba(0, 0, 0, 0.8)',
                        'border': '1px solid #cccccc',
                        'border-radius': '0.5em',
                        'box-shadow': '0 0.2em 0.2em #111'})
                    .append(
                           $(document.createElement('div')).css({'padding': '0.5em 1em'}).html(text)  //for more tool info add the following + '<br/>(' + verticalPosition + '-' + horizontalPosition + ':' + domId + ')'  
                    )
            );  
        }




//The only difference is  prependTo and insertBefore method.. 


        if($element.is('td')){

                       $(document.createElement('img'))
                            .attr({src:'inc/images/help_bubble.png', title:'help Image', 'class': 'helpImg'})
                            .prependTo($element)
                            .css({'position':'absolute',
                                   'z-index':999,
                                   'top': xPos,
                                   'left': yPos
                             })

                   return true;
               }

                $(document.createElement('img'))
                            .attr({src:'inc/images/help_bubble.png', title:'help Image', 'class': 'helpImg'})
                            .insertBefore($element)
                            .css({'position':'absolute',
                                   'z-index':999,
                                   'top': xPos,
                                   'left': yPos

                                 })
4

3 回答 3

3

使用[]语法，以便您可以使用动态函数名称：

var func = $element.is('td') ? "append" : "after";
$element[func](...);

另外，考虑使用类名来定义 CSS 中的样式。这也应该使您的代码更加清晰。

于 2012-08-20T23:10:34.487 回答
2

看起来你添加的东西是一样的，但是你添加它的方式是不同的，这取决于你是否添加到td.

var toAdd = $element.append(
                  $(document.createElement('div')).attr({'id': tooltipId}).addClass('js-tutorialTooltips').css({
                      'position': 'absolute',
                      'z-index':'9999', 
                      'color':'white',
                      'background-color': 'rgba(0, 0, 0, 0.8)',
                      'border': '1px solid #cccccc',
                      'border-radius': '0.5em',
                      'box-shadow': '0 0.2em 0.2em #111'})
                    .append(
                      $(document.createElement('div')).css({'padding': '0.5em 1em'}).html(text) //for more tool info add the following + '<br/>(' + verticalPosition + '-' + horizontalPosition + ':' + domId + ')'
                   )
                )

接着

if($element.is('td')){
    $element.append(toAdd)
else 
    $element.after(toAdd);

如果您添加的内容不同，您可以将 css 属性分解出来，然后在条件中修改它们。

var toAdd, cssProps = {/* defaultValues */};

if($element.is('td')){
    // tweak css props       
    toAdd  = $(document.createElement....
    $element.append(toAdd)
} else {
    // tweak css props2
    toAdd  = $(document.createElement....
    $element.after(toAdd);
}
于 2012-08-20T23:10:22.230 回答
1

首先创建元素：

var element = $('<div/>').attr({'id': tooltipId}).addClass('js-tutorialTooltips').css({
                  'position': 'absolute',
                  'z-index':'9999', 
                  'color':'white',
                  'background-color': 'rgba(0, 0, 0, 0.8)',
                  'border': '1px solid #cccccc',
                  'border-radius': '0.5em',
                  'box-shadow': '0 0.2em 0.2em #111'})
                .append(
                  $('<div/>').css({'padding': '0.5em 1em'}).html(text) //for more tool info add the following + '<br/>(' + verticalPosition + '-' + horizontalPosition + ':' + domId + ')'
               );

if ($element.is('td')) {
  $element.append(element);
} else {
  $element.after(element);
}
于 2012-08-20T23:12:57.793 回答