0

mixitupフィルターに使用される次のコードがあります。このコードは、入力範囲からの入力を調整し、チェックボックスに設定します。これは、インターネットエクスプローラーを除くすべてのブラウザーで機能します(ie11でテスト済み)。私はそれが初期機能と関係があると思います。

var p = document.getElementById("range"),
    res = document.getElementById("output");

p.addEventListener("input", function () {

        $("output").html(p.value);

    var classes = "";   
    var minimal = 0;
    var maximal = p.value;
    $("input[type='range']").attr({'data-filter': "."+ maximal});
    $("input[type=checkbox].budget").val('.'+maximal);

    $( ".active" ).each(function( index ) {

      var thisClass = $(this).attr("data-filter");
      if (thisClass == '#mix.activiteiten') {
      } else {
          if (thisClass != 'undefined') {

            classes += thisClass + ',';
          }
      }
    });
    if (classes.length > 0) {
        var replaced = classes.replace('undefined', '');

        var matching = 0;
        var arrClasses = replaced.split(",")
    }


}, true);

p.addEventListener("change", function() {
    var $show = $('#FilterContainer').find('#mix.activiteiten').filter(function(){
        var price = Number($(this).attr('data-budget'));
        if (classes.length == 0) {

            return price >= minimal && price <= maximal;

        } else {
            for (index = 0; index < arrClasses.length; index++) {
                var thisValue = arrClasses[index].replace('.', '');

                if ($(this).hasClass(thisValue) && price >= minimal && price <= maximal) {

                    matching = 1;
                    return (price >= minimal && price <= maximal);

                }

            }   
        }

    }); 
        $('#FilterContainer').mixItUp('filter', $show);

}, true);

`

4

3 に答える 3

0

これを試してみてください... jQuery On を使用すると、ブラウザーやバージョンを問わず、より優れた応答を確保できます。

var p = document.getElementById("range"),
   res = document.getElementById("output");

    $("#range").on("input", function () { 
       ...    
    }, true);

    $("#range").on("change", function() {
       ...    
    }, true);
于 2014-12-03T13:52:46.650 に答える
0

クロスブラウザー アプローチに関心がある場合は、機能検出を処理する関数を作成してみてください。出発点として役立つ可能性のある1つの方法を次に示します。

function registerEvent( sTargetID, sEventName, fnToBeRun ) 
{
   var oTarget = document.getElementById( sTargetID );
   if ( oTarget != null ) 
   {
      if ( oTarget.addEventListener ) {   
         oTarget.addEventListener( sEventName, fnToBeRun, false );
      } else {
         if ( oTarget.attachEvent ) 
         {
            oTarget.attachEvent( sOnEvent, fnToBeRun );
         }
      }
   }
}

この関数は、エラー チェック、属性ベースのイベント ハンドラーへのフォールバックなど、プロダクション コードに組み込むために拡張したい場合があるいくつかの仮定を行うことに注意してください。それでも、それは概念実証として役立つかもしれません。

また、IE が主に attachEvent に依存していると主張する人は、古いバージョンの IE を参照しています。IE9 以降、addEventListener はサポートされているだけでなく、IE にも推奨されています。詳細については、次を参照してください。

IE ブログは、 IEの最新ニュースやベスト プラクティスに関する最新情報を入手するのに適した方法です。addEventListener(たとえば、代わりに を使用する理由について説明しているエントリは次のとおりですattachEvent。)

お役に立てれば...

-- ランス

PS 'addEventListener' が機能していないように思われる場合<!DOCTYPE html>は、HTML ファイルの最初の行として追加してみてください。詳細については、「標準サポートを有効にする方法」を参照してください。

PPS このような関数の個人用ライブラリを作成すると、一般的なタスクを新しいプロジェクトに組み込むのにかかる時間を大幅に短縮できます。

于 2014-12-03T17:37:21.303 に答える