简体   繁体   English

在jQuery隐藏/显示之后将不显示的类添加到元素会产生意外的结果

[英]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; 添加仅包含display: none;的类display: none; to list elements after that have been hidden ( hide() ) and then shown ( show() ) leaves the element with a style="display: list-element;" 列出隐藏后的元素( hide() )然后显示( show() ),使元素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 - 可以在这里找到一个有效的示例-http://jsfiddle.net/jayblanchard/x5bpjogj/2/您将要查看浏览器的控制台以查看对DOM的更改,如下所示-

DOM输出

Here is the CSS - 这是CSS-

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

Here is the JavaScript / jQuery - 这是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. 我已经删除了所有不相关的CSS和标记。 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. 更改div上的data-ahv属性应仅显示两个列表项(raise和fetch)。

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? 我是否需要使用hide()show()退出以支持显式类,还是可以通过其他方式解决此问题?

$('[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 . 通过添加removeAttr我没有看到任何奇怪的行为。

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. 在这种情况下,代码库必须重构和使用.hide().show()具有有利于该应用的类被移除display更明确地属性。 This allows the behavior to be more predictable and for further functions to be added to the project with as little pain as possible. 这样可以使行为更加可预测,并且可以在尽可能减少痛苦的情况下将更多功能添加到项目中。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM