jquery - 根据另一个div的CSS使用jQuery更改属性

下面的函数执行所需的操作-检查div #searchBar是否显示（这是一个弹出搜索框），并相应地更新placeholder的#QuickSearchQuery属性。

<input type="search" name="keywords" placeholder="Search..." title="Search" id="QuickSearchQuery" />

<script type="text/javascript">
            $(document).ready(function() {
                if($('#searchBar').css('display') == 'block') {
                    $('#QuickSearchQuery').attr('placeholder','Additional Search Options');
                } else {
                    $('#QuickSearchQuery').attr('placeholder','Search...');
                }
            });
</script>

问题在于它仅在页面加载时执行此操作。根据用户单击其他按钮的不同，#searchBar的显示可以从块更改为无，并且完成后它不会更改#QuickSearchQuery属性。

不幸的是，单击该按钮时无法更改属性，因为还有其他一些因素可能导致#searchBar的显示发生更改（在#searchBar's div之外单击将其设置为'display: none'）。

我没有现场示例，因为该站点尚未上线，但是我主要只是想知道这种事情是否可能。

谢谢！

最佳答案

您已在document.ready事件内部编写了逻辑，该事件仅在页面加载时执行一次。将逻辑放在函数中，然后单击按钮调用它。