javascript - 我如何使这个 javascript 在 IE 8+ 中工作？

Question

我在 Rails 应用程序中有这个 javascript:

<script type="text/javascript">

var buttons = document.querySelectorAll('[data-radio-sub-questions]');
for (var i = 0; i < buttons.length; i++){
    buttons[i].addEventListener('click', show_sub_questions, false);
}

function show_sub_questions(e){
    e = e.target   // e.srcElement; was an attempt at making it work in IE
    var hidden_div = document.getElementById(e.dataset.radioSubQuestions)
            // document.getElementById(e.getAttribute('data-radio-sub-questions')); also an attempt at making it work in IE 

    if(e.checked && hidden_div.className == 'hidden_questions_swipe'){
        hidden_div.className = 'revealed_questions_swipe';
    }else if(e.checked && hidden_div.className == 'revealed_questions_swipe'){
        hidden_div.className = 'hidden_questions_swipe';
    }else{
        return;
    }
}
</script>

所以我正在开发一个允许人们在线购买保险的非常大的应用程序，它有很多问题，如果以特定方式回答这些问题会显示更多需要回答的问题。

上面选择了我放置了数据属性的所有单选按钮，然后为它们分配了点击功能。如果以特定方式回答问题，数据属性实际上包含需要显示的 div 的 id。

这是 css:我可以接受在 IE 中不起作用的转换，但我还需要知道最小/最大/高度属性是否适用于 .revealed_questions_swipe 类。

.hidden_questions_swipe{
    height: 1px;
    transition: all .1s ease-in-out;
    -webkit-transition:all .1s ease-in-out;
    -moz-transition:all .1s ease-in-out;
    visibility:hidden;
}

.revealed_questions_swipe{
    height: auto;
    min-height: 42px;
    max-height: auto;
    transition: all .1s ease-in-out;
    -webkit-transition:all .1s ease-in-out;
    -moz-transition:all .1s ease-in-out;
    visibility: visible;
}

我实际上习惯于处理 chrome 应用程序，因此使其符合 IE 缺乏支持对我来说是新的:(任何帮助将不胜感激。

更新:

所以我现在有(在阅读评论和答案之后):

var buttons;

if(!document.querySelectorAll){
    buttons = get_elements_for_ie("data-radio-sub-questions");
} else{
    buttons = document.querySelectorAll('[data-radio-sub-questions]');
}



for (var i = 0; i < buttons.length; i++){

    if(!buttons[i].addEventListener){
        buttons[i].attachEvent("onclick", show_sub_questions);
    }else {
        buttons[i].addEventListener('click', show_sub_questions, false);
    }
}

function show_sub_questions(e){
    e = e.target || e.srcElement;
    var hidden_div = document.getElementById(e.dataset.radioSubQuestions) || document.getElementById(e.getAttribute('data-radio-sub-questions'));

    if(e.checked && hidden_div.className == 'hidden_questions_swipe'){
        hidden_div.className = 'revealed_questions_swipe';
    }else if(e.checked && hidden_div.className == 'revealed_questions_swipe'){
        hidden_div.className = 'hidden_questions_swipe';
    }else{
        return;
    }
}

function get_elements_for_ie(data_attr){
    var matched_elements = [];
    var all_elements = document.getElementsByTagName("*");

    for(var i = 0; i < all_elements.length; i++){
        if(all_elements[i].getAttribute(data_attr)){
            matched_elements.push(all_elements[i])
        }
    }
    return matched_elements
}

仍然不能在 IE 8 或 9 中工作，也没有看到任何错误。

Answer 1

您将需要针对 querySelectorAll 和 addEventListener 的 shivs/workarounds，以及取消注释您为 e.srcElement 和 数据集解决方法。换句话说，我推荐jQuery。 :)(如果你真的想要，你当然可以不用它。)