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

Question

我从更大的应用程序中提取了代码，以复制问题。

添加仅包含display: none;的类display: none; 列出隐藏后的元素（ hide() ）然后显示（ show() ），使元素style="display: list-element;" 并使这些元素可见，因为内联样式会覆盖这些类。 可以在这里找到一个有效的示例-http://jsfiddle.net/jayblanchard/x5bpjogj/2/您将要查看浏览器的控制台以查看对DOM的更改，如下所示-

这是CSS-

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

这是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;
    }
}

最后是标记-

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

我已经删除了所有不相关的CSS和标记。 在该示例中，仅两个列表项（机架和读取）应可见。 更改div上的data-ahv属性应仅显示两个列表项（raise和fetch）。

我试图从列表项中删除样式属性，这导致其他奇怪的行为。 我是否需要使用hide()和show()退出以支持显式类，还是可以通过其他方式解决此问题？

Answer 1

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

我已经更新了你的小提琴。 通过添加removeAttr我没有看到任何奇怪的行为。

Answer 2

在这种情况下，代码库必须重构和使用.hide()和.show()具有有利于该应用的类被移除display更明确地属性。 这样可以使行为更加可预测，并且可以在尽可能减少痛苦的情况下将更多功能添加到项目中。