Question

我正在尝试编写一个简单的条件，说明如果显示div1，则将div2的显示更改为none。但是，我想要现场更新。因此，无论何时div1显示是＆＃39; grid＆＃39;，div2都会从视线中消失。

<script>
    if($('.div1').css("display") == "grid") {
        $('div2').css({"display":"none"});
        }
</script>

我在这里做错了什么？

Answer 1

一段javascript代码不会在你方便的时候神奇地运行，除非你这样做以便以这种方式运行。你所写的内容只会运行一次，然后继续前进。当事情发生变化时，Javascript本身不会寻找。

您需要跟踪更改并在更改后运行代码。如果您正在为站点编写javascript，您可能知道这些更改何时发生，因此您可以在它们发生时执行代码块。例如，如果div1在用户grid按下时更改为click，那么您可以将您的函数绑定到其click event，以便处理这种情况。

更高级的方法是监视DOM上的更改并在发生时运行函数。您可以使用MutationObserver执行此操作。您可以精确地执行所需的操作，例如if div changes to grid, run myFunction()。

另一种方法是让一个函数按时间间隔运行，但这是一种过时的技术，容易出错和崩溃，绝不建议在javascript中使用。

Answer 2

$.watch插件可以执行此操作：

$('.div1').watch('display', function() {
    var display = ($(this).css('display') === 'grid' ? 'none' : 'block');

    $('.div2').css('display', display);
});

与setInterval方法不同，这是库的功能（来自github页面）：

此插件允许您监听CSS属性或属性何时更改元素。它利用Mutation Observers来模仿DOMAttrModified（Mutation Events API）和propertychange（Internet Explorer）事件。

请注意，您的原始代码使用$('div2')代替$('.div2')，并且只会匹配如下所示的元素：<div2>foo</div2>。在我的例子中，我把它改成了一个类。

如何使我的jquery if / then语句更新生效？

2 个答案: