我如何讓這個JavaScript在IE 8+中工作？

我有一個Rails應用程序在這裏面的javascript：我如何讓這個JavaScript在IE 8+中工作？

<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，但我也需要知道最小/最大/高度屬性是否可以在.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工作，仍然沒有看到任何錯誤

。

來源

2012-09-21 Ryan

['addEventListener'在IE 8中不起作用]（http://stackoverflow.com/questions/9769868/addeventlistener-not-working -in-ie8）/ [我什麼時候可以使用CSS min/max-width/height？]（http://caniuse.com/minmaxwh） – DCoder

您需要shivs /替代方案querySelectorAll和addEventListener，以及取消註釋e.srcElement和dataset變通辦法的註釋掉代碼。換句話說，我推薦jQuery。 :)（雖然你當然可以沒有它，如果你真的想。）

來源

2012-09-21 16:06:34

+1用於提示jQuery。當你開始做複雜的事情時，特別是綁定事件和操縱dom，尋找一個框架來規範瀏覽器之間的行爲併爲你解決它們的不一致問題。 – nzifnab

我如何讓這個JavaScript在IE 8+中工作？

回答

相關問題