javascript - 如何在隐藏/显示另一个元素时更改一个元素的 CSS(没有自定义事件)？

Question

我有一个包含以下内容的页面:

HTML

<div class="parent">
    <div class="fbNubFlyoutOuter">
        <div class="fbNubFlyoutInner">
            <div class="predecessor"></div>
            <div class="fbNubFlyoutFooter">
                <div class="_552h hidden_elem"></div>
                <div class="other"></div>
            </div>
            <div class="successor"></div>
        </div>
    </div>
    <div class="boxMargin"></div>
    <div class="rest"></div>
</div>

现在，下面的事情发生了(都是动态发生的，所以只有一个 if-else 不会做):

1. 类 _552h 的 div 通过分别添加/删除类 hidden_​​elem 来显示/隐藏。

2. 现在，只要有 hidden_​​elem 类，我就会尝试将 boxMargin 的 CSS 更改为 background-color:red;添加到 _552h。否则，boxMargin 有 background-color:green;。

CSS 就像:

._552h {
    background-color:yellow;
    border:1px solid black;
    height:50px;
    width:50px;
}
._552h.hidden_elem {
    display:none;
}
.boxMargin {
    height: 50px;
    width: 50px;
    border:1px solid black;
    background-color:green; /*should be become red when _552 is hidden*/
}
/*Maybe add a .boxMargin hidden class rule, where bkg color is red*/

注意:我将无法创建自定义事件，因为它需要我触发它们，这对我来说是不可能的，因为显示/隐藏是由一些我无法编​​辑的其他脚本发生的.另外，我不打算使用 jQuery 的 attrchange 插件。

这可以通过以某种方式为 _552h 绑定(bind) show/hide 事件来解决。

我已经在 SO 上查看了一些解决方案，但其中大部分涉及创建自定义隐藏/显示事件并触发它们，正如我所提到的，这是不可能的。

另外，我看到了这个:https://stackoverflow.com/a/19525797/3751213 .但它没有被解雇，我不知道为什么。

可以有简单的 CSS 解决方案吗？(可能是通过 parent 或兄弟选择)

或者，我将不得不使用 attrchange 或 DOMListeners(for attributes) 或自定义事件？如果是这样，我将如何获得它？

我提到的链接，我在这里试过: JSFIDDLE

由于情况可能令人困惑，因此将编辑问题以提供所需的所有信息。

编辑

如果我能使 fiddle 工作也很好。

Answer 1

在您的情况下，_552h 元素可见性的显示不是由 show 或 shide 事件管理的，因此将行为绑定(bind)到这些方法对您没有帮助。

如果一些其他代码正在添加或删除类 hidden_​​elem，也许您可​​以监听 addClass 或 removeClass 方法。

(function ($) {
      $.each(['addClass','removeClass'], function (i, ev) {
        var el = $.fn[ev];
        $.fn[ev] = function () {
          this.trigger(ev);
          return el.apply(this, arguments);
        };
      });
    })(jQuery);

jQuery(document).ready(function() {
    jQuery(document).on('removeClass','._552h',function() {
          jQuery('.boxMargin').css('background-color','green');
    });

    jQuery(document).on('addClass','._552h',function() {
        jQuery('.boxMargin').css('background-color','red');
    });
    jQuery('#changevisibility').click(function() {
        if(jQuery('._552h').hasClass('hidden_elem')) {
            jQuery('._552h').removeClass('hidden_elem');
        } else {
            jQuery('._552h').addClass('hidden_elem'); 
        }

    });

});

http://jsfiddle.net/amenadiel/YsSen/