Question

我在rails app中有这个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>

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

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

这是css：我没有在IE中工作的转换，但我还需要知道min / max / height属性是否适用于.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 /变通方法，并取消注释e.srcElement和dataset解决方法的已注释代码。换句话说，我推荐jQuery。 :)（如果你真的想要，你当然可以不用它。）

我如何让这个JavaScript在IE 8+中运行？

1 个答案: