0

我有以下用于混合过滤器的代码，此代码调节输入范围的输入并将其设置为一个复选框，该复选框已选中，它适用于除 Internet Explorer 之外的所有浏览器（在 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

在较旧的 IE 中 attachEvent 方法可以代替 addEventListner

见文档

于 2014-12-03T13:55:53.110 回答
0

如果您对跨浏览器方法感兴趣，请尝试创建一个为您处理特征检测的函数。这是一种可能有助于作为起点的方法：

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 回答