jQuery DOM 树导航 (.prevAll) 从兄弟中移除类在 IE 10 中不起作用

标签 jquery css dom internet-explorer-10

我有一个表单,其中包含信息的 div 是输入字段的兄弟。

我想专注于给定的输入字段以仅显示其兄弟项,因此我使用 .prevAll 和 :first 选择正确的 div 以从中删除类“隐藏”。这适用于 chrome(各种)、IE 11 和 firefox(各种),但不适用于 IE10(不幸的是,它是我的用户最常用的浏览器)。

HTML:

<div class="container-module">
        <div class="text-module-number">1.1 </div>
        <div class="text-module-text">Total population</div>          
        <div class="prior-data hidden">
            <p>Data for 2013:</p>
            <span class="cpready">30,551,674</span>
            <div class="right-arrow"></div>
            <div class="useit">Use this data</div>
        </div>              
        <input class="capture-input" id="q_1233" type="" value="" name="1233" placeholder="Enter a number">
</div>

CSS

.hidden{
display: none;
width: 0;
height: 0;
}

 .prior-data {
  position: absolute;
  right: 328px;
  padding: 8px;
  top: 5px;
  z-index: 2;
  border: 2px solid #1892c1;
  background-color: white;
}

jquery

$("input").focus(function(){
    $(".prior-data").addClass("hidden");
    $( event.target ).prevAll("div.prior-data:first").removeClass( "hidden" );
});

最初的 addClass 隐藏在那里,这样以前显示的此类 div 的示例被隐藏在新字段的焦点上,然后任何给定字段的同级显示它的同级。这样一次只显示一个

编辑:附加信息:IE 中的控制台没有给我任何错误或警告。

编辑:测试以下内容

$("input").focus(function(){
    alert("focus detected");
    $(".prior-data").addClass("test");
    $( event.target ).prevAll("div.prior-data:first").removeClass( "hidden" );
});

按预期成功提醒字段焦点,并成功添加测试类。所以失败的是 DOM 导航。

最佳答案

我发现了问题。

有必要在函数的参数中定义事件。我不确定为什么在 IE10 中会出现这种情况,但在其他任何情况下都不会,但它已经解决了这个问题。

工作代码如下:

$("input").focus(function(event){
  $(".prior-data").addClass("hidden");
  $( event.target ).prevAll("div.prior-data:first").removeClass( "hidden" );
});

关于jQuery DOM 树导航 (.prevAll) 从兄弟中移除类在 IE 10 中不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30087567/

相关文章:

javascript - 我无法遍历我的 JSON 并获取我的数据

html - 减少内容和页脚之间的空间

css - 使用css获取兄弟html元素以占用整个父容器

java - JTextPane - HTMLDocument : when adding/removing a new style, 其他属性也发生变化

javascript - jQuery - 包装文本元素的特定部分

javascript - 在字符串中回显 JQuery 变量

javascript - jqGrid (v4.1.2) 树网格的排序不适用于邻接模型

javascript - 根据特定列的数据在不同宽度的表格列中应用省略号

javascript - 修改 html (DOM) 后丢失更改

php - 简单的 dom 解析器 double find() 不起作用?