Question

以下功能可以满足需要 - 它会检查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显示更改（点击{{1}以外的地方div将它设置为#searchBar's）。

我没有现场示例，因为该网站尚未生效，但大多数情况下我只是想知道这种事情是否可行。

谢谢！

Answer 1

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

Answer 2

此类属性的更改为DOM Mutation event

您可以使用此Mutation events plugin

监控它们

但说实话，@ Akshey Bhat拥有最简单的解决方案 - 如果可以，可以通过一个功能引导所有逻辑。

Answer 3

您可以使用MutationObservers来监视DOM元素的更改。以下是观看属性更改的示例。这是纯粹的JavaScript。我不确定jQuery是否内置了这样的内容。

小提琴：http://jsfiddle.net/AtheistP3ace/e6c1xdob/

HTML：

<div id="some-id" data-test="somevalue"></div>

JS：

var target = document.querySelector('#some-id');

var observer = new MutationObserver(function(mutations) {
    mutations.forEach(function(mutation) {
        alert(mutation.type);
    });
});

var conf = {
    attributes: true,
    childList: false,
    characterData: false
}

observer.observe(target, conf);

target.setAttribute('data-test', 'newvalue');

以下是仅针对样式属性更改观看searchBar的示例。每当样式属性发生更改时，我们都会检查显示是否已更改并相应地更新。如果您在线应用显示更改，此代码将起作用。如果没有并且正在使用类来进行这些更改，您可以更改此代码以查看类属性，以查看是否已应用特定类。

$(document).ready(function() {
    var searchBar = $('#searchBar')[0];
    var observer = new MutationObserver(function(mutations) {
        mutations.forEach(function(mutation) {
            updateAttribute();
        });
    });

    var conf = {
        attributes: true,
        childList: false,
        characterData: false,
        attributeFilter: ['style']
    }

    observer.observe(searchBar, conf);
});

function updateAttribute() {
    if ($('#searchBar').css('display') == 'block') {
        $('#QuickSearchQuery').attr('placeholder', 'Additional Search Options');
    } else {
        $('#QuickSearchQuery').attr('placeholder', 'Search...');
    }
}

Answer 4

您的逻辑写在document.ready事件中，仅在页面加载时执行。所以你也为按钮点击编写了逻辑。

以下是您可以使用的一些逻辑。

<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...');
                }

            });


                $('button').click(function() { 
                    if($('#searchBar').css('display') == 'block') {
                    $('#QuickSearchQuery').attr('placeholder','Additional Search Options');
                } else {
                    $('#QuickSearchQuery').attr('placeholder','Search...');
                }
               });
</script>

Answer 5

最简单的方法是定义一个自定义事件，只要您可能需要更新元素的行为，就可以触发该事件。这样，您可以在文档加载时触发事件，并在其他元素发生更改时触发事件，并在自定义事件处理程序中合并所有逻辑。

以下是我在文档就绪时触发myToggle事件以及点击toggleSearch按钮的示例。

＆＃13;

$(document).ready(function() { 
  $("#searchBar").trigger("myToggle");
});

$("#toggleSearch").click(function() {
  $("#searchBar").toggle();
  $("#searchBar").trigger("myToggle");
});

$("#searchBar").on("myToggle", function() {
  if($('#searchBar').is(':visible')) {
    $('#QuickSearchQuery').prop('placeholder','Additional Search Options');
  } else {
    $('#QuickSearchQuery').prop('placeholder','Search...');
  }
});

＆＃13;

#searchBar {
  background-color: #CCC;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="searchBar">
  Search Bar
</div>
<input type="search" name="keywords" placeholder="Search..." title="Search" id="QuickSearchQuery" /> 
<input type="button" id="toggleSearch" value="Toggle Advanced Search" />

＆＃13;

使用jQuery更改属性，基于另一个div的css

5 个答案: