jquery - Div 未过滤为 :hidden when display:none; is appended as style

Question

我有一些简单的 HTML:

<div id="selectorContainer">
    <div id="chainedSelector" style="display: none;"><% Html.RenderPartial("ProjectSuggest/ChainedProjectSelector"); %></div>
    <div id="suggestSelector"><% Html.RenderPartial("ProjectSuggest/SuggestControl", new SuggestModeDTO{RegistrationMode = Model.RegistrationMode}); %></div>
</div>

这是两个控件容器。我有 jQuery 代码在显示这些之间切换，但我需要将用户上次登录时使用的一个存储为 cookie(即可见的那个)。 cookie 的存储不是问题。

问题是，由于某种原因，我无法使用 .is(":hidden") 检测到哪一个是隐藏的，也无法使用 .is(":visible") 检测到哪一个是可见的)

当我使用这两个选择器时，我总是会得到两者。两者都为“真”和“真”，尽管其中一个有显示:无；而另一个则没有。请注意，它们未放置在隐藏容器内，否则会同时隐藏两者，因此没有任何隐藏的祖先容器。

谁能解释为什么会发生这种情况？

jQuery 代码包含用于获取 ID 和获取所选 ID 的源代码(目前已损坏):

getChainedSelectorId: function() {
    return "#chainedSelector";
},

getSuggestSelectorId: function() {
    return "#suggestSelector";
},

getSelectedSelector: function() {
    alert($(this.getChainedSelectorId()).is(":hidden"));
    alert($(this.getSuggestSelectorId()).is(":hidden"));
    var selected = ($(this.getChainedSelectorId()).is(":visible") ? this.getChainedSelectorId() : this.getSuggestSelectorId());
    alert(selected);
    return selected;
},

提前致谢。

Answer 1

我只是用上面的 html 运行了下面的代码，它运行得很好:

<script type="text/javascript">
testobj = {
getChainedSelectorId: function() {
    return "#chainedSelector";
},

getSuggestSelectorId: function() {
    return "#suggestSelector";
},

getSelectedSelector: function(){
alert($(this.getChainedSelectorId()).is(":hidden"));
    alert($(this.getSuggestSelectorId()).is(":hidden"));
    var selected = ($(this.getChainedSelectorId()).is(":visible") ? this.getChainedSelectorId() : this.getSuggestSelectorId());
    alert(selected);
    return selected;    
    }
}
$(function() {
    testobj.getSelectedSelector();
});


</script>

局部 View 中渲染了什么？