为什么我的jQuery不能在IE上工作(在Safari,Chrome和FF中工作正常)?

tqui 发布于 2019-03-09 jquery 最后更新 2019-03-09 14:37 0 浏览

他在那里,我一直试着绕过几个小时(我使用Wordpress),很难知道jQuery有什么问题。在Windows / Mac的FF和Chrome工作正常,IE让我疯狂。 我在标题中使用:

<!DOCTYPE html>
这是我在做测试的网站: http://newportal.no-ip.org/ 这是我的JS代码:
     jQuery(document).ready(function() {
//Menu
    jQuery("ul.menu").superfish({
            delay       : 100,
            animation   : {opacity:'show',height:'show'},
            //speed     : 10,
            autoArrows  : true, 
            dropShadows : false
        });
//Popup FancyBox
jQuery('.fancybox-media').fancybox({
        maxWidth    : 800,
        maxHeight   : 600,
        fitToView   : false,
        width       : '70%',
        height      : '70%',
        autoSize    : false,
        closeClick  : false,
        openEffect  : 'none',
        closeEffect : 'none'
    });
jQuery('.fancybox').fancybox();
var thumbnails = 'a:has(img)[hrefjQuery=".jpg"]';
    jQuery(thumbnails).addClass("fancybox").attr("rel","fancybox");
jQuery(".popup").fancybox({
         'width' : '75%',
         'height' : '75%',
         'autoScale' : false,
         'transitionIn' : 'none',
         'transitionOut' : 'none',
         'type' : 'iframe'
     });
//Expand
jQuery('div.moexpander').hide();
    jQuery('a.moexpander').click(function(){
        jQuery(this).parent().next('div.moexpander').slideToggle();
        return false;
    });
//Slideshow Destacados, Create an array of titles
    var titles = jQuery('#cycle div.item').find("h3").map(function() { return jQuery(this).text(); });
    //Add an unordered list to contain the navigation
    //Invoke the cycle plugin on #cycle
    jQuery('#cycle').before('<ul id="pager" class="sprites bannerBg"></ul>').cycle({
        //Specify options
        fx      :'fade', //Name of transition effect
        speed   : 600,
        delay   : -1200,
        pause   :   1,
        pager   : '#pager',     //Selector for element to use as pager container
        pagerAnchorBuilder: function (index) {               //Build the pager
        return '<li><a href="#">' + titles[index] + '</a></li>';
    },
    updateActivePagerLink: function(pager, currSlideIndex) {
        jQuery(pager).find('li').removeClass('active').filter('li:eq('+currSlideIndex+')').addClass('active');
    }
    });
  jQuery('#cycle').hover(function() {
  jQuery('.pause').show();
  }, function() {
        jQuery('.pause').hide();
    });
//Slideshow Voluntariado
    jQuery('#cyclePopular').after('<div id="navPopular">') 
        .cycle({ 
    fx          : 'scrollHorz',
    speed       : 'fast',
    delay   : -1200,
    pause   :   1,  
    pager       : '#navPopular'
    });
//Slideshow Avisos
    jQuery('#cycleAvisos').cycle({ 
    fx          : 'scrollHorz',
    delay   : -4000,
    pause   :   1,
    prev:    '#prev',
    next:    '#next',
    pager       : '#navAvisos',
    after: onAfter
    });
//Make Avisos's Height auto-resizing    
    function onAfter(curr, next, opts, fwd) {
        var jQueryht = jQuery(this).height();
//set the container's height to that of the current slide
        jQuery(this).parent().animate({height: jQueryht});
    }
//Make all the block clickable  
jQuery("#link").click(function(){
     window.location=jQuery(this).find("a").attr("href");
     return false;
});
//Add CSS to Sidebar Pages
jQuery('#sidebar-pages').find("li").before("<span class='sprites bulletR left'></span>");
// Tabs
 jQuery.fn.easytabs = function(){
 //Default Action
 jQuery(this).find(".easytabs_content").hide(); //Hide all content
 jQuery(this).find("ul.easytabs li:first").addClass("active").show(); //Activate first tab
 jQuery(this).find(".easytabs_content:first").show(); //Show first tab content
 jQuery(this).find(".easytabs_content li a").before("<span class='sprites bulletR'></span>"); //Show bullets
//On Click Event
 jQuery("ul.easytabs li").click(function() {
 jQuery(this).parent().parent().find("ul.easytabs li").removeClass("active"); //Remove any "active" class
 jQuery(this).addClass("active"); //Add "active" class to selected tab
 jQuery(this).parent().parent().find(".easytabs_content").hide(); //Hide all tab content
 var activeTab = jQuery(this).find("a").attr("href"); //Find the rel attribute value to identify the active tab + content
 jQuery(activeTab).fadeIn(); //Fade in the active content
 return false;
 });
};//end function
jQuery("div[class^='easytabs']").easytabs(); //Run function on any div with class name of "easytabs"
// Search animation with IE statements
    var input = jQuery('input#s');
    var divInput = jQuery('div.input');
    var width = divInput.width();
    var outerWidth = divInput.parent().width() - (divInput.outerWidth() - width) - 28;
    var submit = jQuery('#searchSubmit');
    var txt = input.val();
input.bind('focus', function() {
        if(input.val() === txt) {
            input.val('');
        }
        jQuery(this).animate({color: '#000'}, 300); // text color
        jQuery(this).parent().animate({
            width: outerWidth + 'px',
            backgroundColor: '#fff', // background color
            paddingRight: '43px'
        }, 300, function() {
            if(!(input.val() === '' || input.val() === txt)) {
                if(!(jQuery.browser.msie && jQuery.browser.version < 9)) {
                    submit.fadeIn(300);
                } else {
                    submit.css({display: 'block'});
                }
            }
        }).addClass('focus');
    }).bind('blur', function() {
        jQuery(this).animate({color: '#b4bdc4'}, 300); // text color
        jQuery(this).parent().animate({
            width: width + 'px',
            backgroundColor: '#e8edf1', // background color
            paddingRight: '15px'
        }, 300, function() {
            if(input.val() === '') {
                input.val(txt)
            }
        }).removeClass('focus');
        if(!(jQuery.browser.msie && jQuery.browser.version < 9)) {
            submit.fadeOut(100);
        } else {
            submit.css({display: 'none'});
        }
    }).keyup(function() {
        if(input.val() === '') {
            if(!(jQuery.browser.msie && jQuery.browser.version < 9)) {
                submit.fadeOut(300);
            } else {
                submit.css({display: 'none'});
            }
        } else {
            if(!(jQuery.browser.msie && jQuery.browser.version < 9)) {
                submit.fadeIn(300);
            } else {
                submit.css({display: 'block'});
            }
        }
    });
});
我会很感激你的帮助, H·
已邀请:

zvelit

赞同来自:

IE中我看到两个方法调用得不到支持(或完全支持):

  • .hover
  • .slideToggle
所有toggle函数都具有粗略/不一致的跨浏览器支持。我会尝试改变这一点,特别是因为slide效果实际上具有所有jQuery效果的一些最高开销,并且在慢速浏览器(如IE - 尤其是旧版本)上显而易见。 至于.hover,我建议你阅读并使用.mouseenter.mouseleave.mousein.mouseout的组合。我不记得是哪一个,但.hover实际上是其中两个的缩写,但对它的支持是粗略的。其中一个集合基于IE的内置设置,我不认为它是.hover的简称。
更新1: 根据您的反馈,我建议您搜索.superFishfancybox插件的源代码,以确保他们不会将fadeTo用于opacity,因为这将完全破坏您的脚本,并且他们使用正确的opacity操作技术,与IE兼容。 更新2: 您的.map()方法也是错误的。从其余代码中,我可以看到您正在尝试创建一个vanilla JavaScript数组,而不是jQuery数组。因此,您必须在.map()之后调用.get()。我找到了一个answer to another post,进一步解释了这一点。 更新3: 我希望我不是很傻,但我注意到这一行:
jQuery('div.moexpander').hide();
在为jQuery('div.moexpander')设置点击处理程序之前就已经拥有了。问题是,我没有看到任何地方显示jQuery('div.moexpander')。如果我是正确的,并且在此之后您没有再显示它,则div.moexpander元素将永远不会显示,并且永远不会使用处理程序。我不知道这对您的代码/问题有多重要,因为我仍然不知道您的症状,但这很可能是一个错误。 更新4: 此外,只要我们正在调试,您应该运行代码并使用分号终止每个函数声明。例如,更改:
function someFunct() { 
    ..... 
}
function someFunct() { 
    ..... 
};
尽管JavaScript中不需要这样做,但是在很多情况下这会影响/影响您的脚本,并且在某些情况下会使它们崩溃。 说实话,我不完全理解为什么会这样,但我遇到了这个问题的情况,我相信其中一些问题出现在IE中。 更新5: 如果这仍然不起作用,请查看jQuery论坛上的this thread,该论坛处理涉及fancyBox的IE加载问题。