1

我在 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>

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

上面选择了我放置数据属性的所有单选按钮，然后为它们分配了点击功能。如果以特定方式回答问题，则 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 中运行，并且仍然没有看到任何错误。

4

1 回答 1

2

您将需要 shivs/workarounds for querySelectorAlland addEventListener，以及取消注释您注释掉的代码e.srcElementanddataset解决方法。换句话说，我推荐 jQuery。:) （虽然如果你真的想要，你当然可以不用它。）

于 2012-09-21T16:06:34.357 回答