Chrome/Edge下网站toggle功能失效无控制台报错解决方案

问题根因 #

核心是IE和现代浏览器的DOM实现差异：

• IE11存在非标准行为：所有带value属性的标签（包括<img>这类非表单元素）都会被映射DOM级别的value属性，jQuery的.val()可以正常读取属性值
• Chrome/Edge等现代浏览器遵循W3C标准：仅表单元素（input、select、textarea、option等）拥有原生value属性，非表单元素上写的value属于无效自定义属性，jQuery调用.val()读取这类元素时会返回空字符串
• 空字符串执行split('|')后得到的数组内容为空，传入toggle函数后拼接出的选择器无效，找不到对应DOM节点，所有逻辑静默失败，不会抛出任何控制台错误，和你观察到的现象完全一致。

*额外提醒：你贴出的jQuery ready绑定代码末尾缺失闭合的);，如果实际代码也存在这个语法问题请一并补全，语法问题会直接导致事件绑定不执行。

分步修复方法 #

• 第一步：替换所有非表单元素上的.val()调用
  所有读取<img class="showicon/hideicon">上value值的地方，把.val()改成.attr('value')，这个方法会直接读取HTML上书写的属性值，兼容所有浏览器。
  修复后的事件绑定代码：

$(document).ready(function (){
    $(".hideicon").click(function(){
        // 原写法 var id = $(this).val(); 现代浏览器读img的val返回空字符串
        var id = $(this).attr('value');
        var dt = id.split('|');
        toggle(dt[0], dt[1], 'h');
    });

    $(".showicon").click(function(){
        var id = $(this).attr('value');
        var dt = id.split('|');
        toggle(dt[0], dt[1], 's');
    });
}); // 注意补全原代码缺失的闭合括号与分号

• 第二步：修复toggle函数内部的同类问题
  toggle函数循环中读取图标value的逻辑也要同步替换，如果页面上#subCt不是表单元素，第一行的.val()也要一并修改：

function toggle(x, y, z){
    // 若#subCt是非表单元素，将下方.val()改为.attr('value')
    var max = $("#subCt").val();
    if(x == 'x'){
        var arry = z == 's' ? $('.hideicon') : $('.showicon');
        for(var i = 1; i < arry.length; i++){ 
            // 原写法$(arry[i]).val()替换为attr读取
            var raw = $(arry[i]).attr('value').substr(0, 2);
            if(z == 'h'){
                $('.'+raw+'1').hide();
                $('.showicon').show();
                $('.hideicon').hide();
                $("#imgShow"+y).show();
                $("#imgHide"+y).hide();
                $("#body").css({"height": "auto", "padding-bottom": "30px"});
                $("#footerDiv").css("bottom", "0%");    
                openSubCategory = 0;
            } else {
                $('.'+raw+'1').show();
                $('.showicon').hide();
                $('.hideicon').show();
                $("#imgShow"+y).hide();
                $("#imgHide"+y).show();
                $("#body").css({"height": "auto", "padding-bottom": "30px"});
                $("#footerDiv").css("bottom", "-13%");
                openSubCategory = max;
            }
        }
    } else {
        if($('.'+x+'1').is(':visible')){
            $("#imgHide"+y).hide();
            $("#imgShow"+y).show();
            $('.'+x+'1').hide();
            openSubCategory--;
            $("#imgShow0").show();
            if(openSubCategory == 0) $("#imgHide0").hide();
            if(openSubCategory <= 7) $("#footerDiv").css("bottom", "0%");    
        } else {
            $("#imgShow"+y).hide();
            $("#imgHide"+y).show();
            $('.'+x+'1').show();
            openSubCategory++;
            $("#imgShow0").show();
            $("#imgHide0").show();
            if(openSubCategory >= 8) $("#footerDiv").css("bottom", "-13%");  
        }   
    }
}

替换完成后功能即可在现代浏览器正常运行。

dataset API 标准用法 #

dataset是现代浏览器原生提供的自定义属性读写API，是目前前端存取元素自定义数据的标准方案，完全避免属性名冲突、浏览器兼容问题，比直接在元素上写非标准属性更规范：

• 定义规则：在HTML元素上添加data-前缀的属性，多单词用短横线分隔，比如你之前存在value里的x|0，可以改写为data-toggle-val="x|0"，PHP输出部分对应修改为：

echo "<div><img class='showicon' id='imgShow0' data-toggle-val='x|0' src='show.png' alt='click to show all details'/></div>";
echo "<div><img class='hideicon' id='imgHide0' data-toggle-val='x|0' src='hide.png' alt='click to hide all details'/></div>";

• 读取规则：短横线连接的属性名会自动转为驼峰格式，通过DOM元素的dataset属性直接访问：
  • 原生JS写法：const id = document.getElementById('imgShow0').dataset.toggleVal
  • jQuery写法：const id = $('#imgShow0').data('toggleVal')
• 优势：不会和元素原生属性重名冲突，所有现代浏览器全兼容，不需要依赖IE的非标准行为，代码可维护性更强。

内容的提问来源于stack exchange，提问作者zeetk