CODEWITHSUNDEEP
jquery
FlyingCat
FlyingCat

Reputation: 14250

How to simplify the if statements codes

I am trying to simplfy the codes below to make them less ugly. Are there better way to do this? Thanks a lot.

//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

                                 })

Upvotes: 0

Views: 84

Answers (3)

hvgotcodes
hvgotcodes

Reputation: 120198

It seems the stuff you add is the same, but how you add it is different depending on whether you are adding to a 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 + ')'
                   )
                )

and then

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

If what you are adding is not the same, you can factor out the css properties, and then modify them in the conditional instead.

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

Upvotes: 2

Guffa
Guffa

Reputation: 700342

Create the element first:

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

Upvotes: 1

pimvdb
pimvdb

Reputation: 154838

Use the [] syntax so that you can use a dynamic function name:

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

Also, consider using class names to define the styles in CSS. That should make your code a lot clearer as well.

Upvotes: 3

Related Questions