CODEWITHSUNDEEP
javascriptjquerycsshtml
Jay Blanchard
Jay Blanchard

Reputation: 34426

Adding a class with display none to an element after jQuery hide / show produces unexpected results

I have boiled down the code from a much larger application to replicate the problem.

Adding a class that contains only display: none; to list elements after that have been hidden (hide()) and then shown (show()) leaves the element with a style="display: list-element;" and leaves those elements visible because the inline style overrides the classes. A working example can be found here - http://jsfiddle.net/jayblanchard/x5bpjogj/2/ You'll want to view the browser's console to see the changes to the DOM as shown here -

DOM output

Here is the CSS - 

.anchor-control-hidden {
    display: none;
}

Here is the JavaScript / jQuery - 

var anchor = 'F1';
$('[data-anchor="'+anchor+'"]').find('.anchor-control').hide().show(); // this is done to replicate the problem
setAnchorControlButtons(anchor);

function setAnchorControlButtons(anchor){
  state = $('[data-anchor="'+anchor+'"]').attr('data-status');
  $('[data-anchor="'+anchor+'"]').find('.anchor-control').addClass('anchor-control-hidden');
  if( $('[data-anchor="'+anchor+'"]').attr('data-ahv') == 'null' ) {
      var ahvExists = false;
  } else {
      var ahvExists = true;
  }
    switch(state) {
       case 'laid':
           if( ahvExists ) {
                $('[data-anchor="'+anchor+'"]').find('.anchor-fetch, .anchor-raise').removeClass('anchor-control-hidden');
          } else {
                $('[data-anchor="'+anchor+'"]').find('.anchor-rack, .anchor-fetch').removeClass('anchor-control-hidden');
          }
            break;
    }
}

And finally the markup - 

<div data-anchor="F1" data-status="laid" data-ahv="null">
<ul class="anchor-controls">
    <li class="anchor-control anchor-lay" data-action="anchor-lay">
        <div class="anchor-tile"><span class="button-label" style="top: 31%;">Lay</span>
        </div>
    </li>
    <li class="anchor-control anchor-drop" data-action="anchor-drop">
        <div class="anchor-tile"><span class="button-label" style="top: 31%;">Drop</span>
        </div>
    </li>
    <li class="anchor-control anchor-fetch" data-action="anchor-fetch">
        <div class="anchor-tile"><span class="button-label" style="top: 31%;">Fetch</span>
        </div>
    </li>
    <li class="anchor-control anchor-raise" data-action="anchor-raise">
        <div class="anchor-tile"><span class="button-label" style="top: 31%;">Raise</span>
        </div>
    </li>
    <li class="anchor-control anchor-retrieve" data-action="anchor-retrieve">
        <div class="anchor-tile"><span class="button-label" style="top: 31%;">Retrieve</span>
        </div>
    </li>
    <li class="anchor-control anchor-rack" data-action="anchor-rack">
        <div class="anchor-tile"><span class="button-label" style="top: 31%;">Rack</span>
        </div>
    </li>
</ul>
</div>

I have stripped away all of the irrelevant CSS and markup. In the example only two of the list items (rack and fetch) should be visible. Changing the data-ahv attribute on the div should result in only two list items (raise and fetch) to be displayed.

I have tried removing the style attribute from the list item and that results in other odd behavior. Do I need to quit using hide() and show() in favor of explicit classes or can this issue be solved in some other way?

Upvotes: 0

Views: 8866

Answers (2)

Jay Blanchard
Jay Blanchard

Reputation: 34426

In this case the code base had to be refactored and the use of .hide() and .show() had to be removed in favor of classes that apply the display property more explicitly. This allows the behavior to be more predictable and for further functions to be added to the project with as little pain as possible.

Upvotes: 1

Bilal
Bilal

Reputation: 2673

$('[data-anchor="'+anchor+'"]').find('.anchor-control').hide().show().removeAttr('style');

I have updated your fiddle. I didn't see any odd behavior by adding removeAttr.

Upvotes: 1

Related Questions