0

jQuery を使用して、一連のSELECT要素をRADIOボタンに変換しています。次に、ユーザーが特定のSELECTオプションをクリックしたときに、特定のRADIOボタンのCHECKEDステータス
を変更したいと考えています。これを行うには、いくつかのチェックを行い、いくつかの変数を設定します。Chrome と Firefox ではすべてが期待どおりに機能しますが、他のブラウザーでは機能しません。Opera のコンソールは、どの RADIO ボタンがユーザーによってチェックされたかを確認するために使用する変数に ":checked" を追加するとすぐに、変数が未定義であることを教えてくれます (そのため、関数の残りの部分はもう機能しません)。その変数に使用しているコードは次のとおりです。

var bedrukking = $("form#specificatie input:checked[name='staffeldim_5287\\:1192']", window.parent.document).val();

なぜこれが失敗するのかについてのアイデアはありますか? ちなみに、DOM を直接操作することはできません。jQuery が唯一の選択肢です。

チェック済みオプションを変更するためのコード全体を次に示します。

// Verander Bedrukking als Papier wordt ingesteld op 90 of 80 grams wit bankpost
$("form#specificatie select#staffeldim_5285\\:1192", window.parent.document).on("change", function(){
    var papier = $(this).val();
    // 90 grams wit bankpost FSC lasergeschilkt is value 27567, 80 grams wit bankpost FSC lasergeschilkt is value 27565
    if (papier == "27567" || papier == "27565") {
        var bedrukking = $("form#specificatie input:checked[name='staffeldim_5287\\:1192']", window.parent.document).val();
        console.log(bedrukking);
        // 1 zijdig full-color is value 27579, 2 zijdig full-color is 27580
        if (bedrukking == "27579" || bedrukking == "27580") {
            // Zet de value van Bedrukking op iets anders en laat hem knipperen om aandacht te trekken
            $("form#specificatie input[name='staffeldim_5287\\:1192']:checked", window.parent.document).removeAttr('checked');
            $("form#specificatie input[name='staffeldim_5287\\:1192'][value='27583']", window.parent.document).attr('checked', 'checked').animate({opacity: 0}, 200, "linear", function() {
                $(this).animate({opacity: 1}, 200);
            });
            // Geef aan dat deze combinatie niet mogelijk is
            $('table.staffels #combinatieControle', window.parent.document).remove(); // Verwijder de waarschuwing indien hij al aanwezig is, voordat we een nieuwe toevoegen
            $("table.staffels", window.parent.document).eq(0).prepend('<tr id="combinatieControle"><td><div style="margin-bottom: 15px; color: red;">Full-color bedrukking kan niet worden gecombineerd met 80 en 90 grams wit papier. (Deze combinatie is wel mogelijk met het artikel "budget briefpapier".) Uw specificaties zijn gewijzigd.</div></td></tr>');
        }
    }
    // Deze combinatie is wel mogelijk, dus verwijder de waarschuwing indien hij aanwezig is
    else {
        $('table.staffels #combinatieControle', window.parent.document).remove();
    }
});

オランダ語のコメントがいくつかありますが、気にしないでください。SELECT 要素を RADIO ボタンに変更するために使用するコードは次のとおりです (これは Stackoverflow から入手しました)。

$('form#specificatie select', window.parent.document).each(function(i, select){
    var $select = $(select);

    // Als er meer dan 10 opties zijn voor de huidige select, converteren we hem niet naar radio buttons
    var nrOptions = $(this).find('option').length;
    if (nrOptions > 10) {
        return
    }

    var counter = 1
    $select.find('option').each(function(j, option){
        var $option = $(option);
        // Create a radio:
        var $radio = $('<input type="radio" />');
        // Set name and value:
        $radio.attr('name', $select.attr('name')).attr('value', $option.val());
        // Set ID:
        $radio.attr('id', $option.val() + '_' + counter );
        // Set checked if the option was selected
        if ($option.attr('selected')) $radio.attr('checked', 'checked');
        // Insert radio before select box:
        $select.before($radio);
        // Insert a label:
        $select.before(
          $("<label />").attr('for', $option.val() + '_' + counter).text($option.text())
        );
        // Insert a <br />:
        $select.before("<br/>");

        counter++;
    });
    $select.remove();
});

更新: jQuery のバージョンを 1.8.1 から 1.7.1 に戻そうとしました: Internet Explorer 8 と 9 を除くすべてのブラウザーですべてが機能するようになりました。

4

1 に答える 1

0

console.log が定義されていないことを示す IE 8 エラーが表示されました。コードから console.log を削除すると、IE の問題が修正され、すべてのブラウザーで正しく動作するようになりました。

于 2012-10-15T09:28:08.330 に答える