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 で機能しないことは問題ありませんが、最小/最大/高さの属性が.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/回避策、querySelectorAllおよび および回避策addEventListenerのコメントアウトされたコードのコメントを解除する必要があります。つまり、jQueryをお勧めします。:) （もちろん、本当に必要な場合は、それなしで行うこともできます。）e.srcElementdataset

于 2012-09-21T16:06:34.357 に答える