Question

我正在浏览器中测试我的网页，似乎有些内容在firefox和opera中无效。我认为它是由我页面上使用的jQuery引起的。

这是我的网站：http://freshbeer.lv/ht/index.html

在源代码的底部，您可以找到所有使用的jQuery代码（主要用于调用和应用插件）。我无法确定哪里出错了，因为控制台中没有显示错误（firefox 20.0）主要功能障碍是

播放器，只是比较它在chrome中的工作方式，然后在firefox或opera中查看它，首先它不会显示“...”表示加载，其次是你点击播放另一个播放器两首歌都在继续播放，而在其他浏览器中，第一首歌会暂停播放，因此只会播放一首歌。
广告应该有由jQuery计算的顶部和底部的边距，它不在opera和firefox中。我错过了什么吗？也许我需要应用某些代码标准？

这似乎是全部，但我无法确定。

我会把我写的代码放在这里（最有可能是问题），注意，上面有几个jQuery插件。

<script type="text/javascript">

//Audio Player
audiojs.events.ready(function () {
    var as = audiojs.createAll();

        $('audio').each(function () {
            var myAudio = this;
            this.addEventListener('play', function () {
                $('audio').each(function () {
                    if (!(this === myAudio)) {
                        this.pause();
                    }
            });
        });
    });
});

$(document).ready(function() {

    //Responsive add margins
    function addMargin () {
        var add = $(".advert");
        var addMargin = add.css("margin-left");
        add.css({
            "margin-top": addMargin,
            "margin-bottom": addMargin
        });
    }
    addMargin();
    $(window).resize(addMargin);

    //Responsive Grid
    var MusicGrid = (function() {
        var $musicGridContainer = $('.grid'),
            init = function() {
                changeMusicGrid();
                initEvents();
                initPlugins();
            },
        changeMusicGrid = function() {
            var w_w = $(window).width();
            if (w_w <= 765) n = 1;
            else if (w_w <= 1180) n = 2;
            else n = 3;
        },
        initEvents = function() {
            $(window).on('smartresize.MusicGrid', function(event) {
                changeMusicGrid();
            });
        },
        initPlugins = function() {
            $musicGridContainer.imagesLoaded(function() {
                setTimeout(function() {
                    $musicGridContainer.masonry({
                        itemSelector: '.article',
                        columnWidth: function(containerWidth) {
                            return containerWidth / n;
                        },
                        isAnimated: true,
                        animationOptions: {
                            duration: 150
                        }
                    });
                }, 500);
            });
        };
        return {
            init: init
        };
    })();
    MusicGrid.init();
});


//Preload Content
function preloadCode() {
    if (preloadCode.done) return;
    preloadCode.done = true;
    clearTimeout(t);

    $(".preloader").css("display", "none");
    $(".grid").css({ opacity: 0, visibility: 'visible', marginTop: 20 }).animate({ marginTop: 0, opacity: 1 }, 550);

    $('.article[id^="article-"]').each(function () {
        if (parseInt(this.id.replace('article-', '')) % 3 === 0) {
            $('#' + this.id).css({ marginTop: 50 }).animate({ marginTop: 0 }, 350);
        } else if (parseInt(this.id.replace('article-', '')) % 2 === 0) {
            $('#' + this.id).css({ marginTop: 100 }).animate({ marginTop: 0 }, 400);
        } else {
            $('#' + this.id).css({ marginTop: 150 }).animate({ marginTop: 0 }, 450);
        }
    });

    $(".footer").css("display", "block");

}

var t = setTimeout(preloadCode, 6000);
$(window).load(preloadCode);

</script>

Answer 1

<强> 1。广告应该有由jQuery计算的顶部和底部的边距，它不在opera和firefox中。我错过了什么吗？也许我需要应用某些代码标准？

您的元素具有自动边距，因此，根据浏览器的不同，.css('margin-left')可能会返回不同的值，包括0。

我建议使用JsSizes library这是一个轻量级插件，可以让您获得实际的边距（以像素为单位）。

<强> 2。播放器，只是比较它在chrome中的工作方式，而不是在firefox或opera中查看它，首先它没有显示“...”表示加载，其次一旦你点击播放另一个播放器，两首歌继续播放，在其他浏览器中，第一首歌会暂停，所以只会播放一首歌。

Firefox和Opera在音频元素中不支持mp3，因此它被flash对象取代。因此，您不能再听这些DOM事件了。

虽然根据他们的annotated source code，Flash对象包含公开方法play()，pause()和isPlaying。

我建议在“播放 - 暂停”按钮上收听点击事件并使用这些功能。像这样：

var as = ''; // You're going to have to make your as variable global to access it outside of your function.
audiojs.events.ready(function () {
    as = audiojs.createAll();
    $('.audiojs .play-pause').click(function(){ //Listening to the click event
        var thisIndex = $(this).parents('.audiojs').index('.audiojs'); // When you create several players, as is an array of instances of players. Here we're finding the DOM index of the player so it reflects its position in the as array.
        $.each(as, function(index,val){ //then, for each instance of players in the as array
            if ( index != thisIndex && as[index].playing ) as[index].pause(); //If the player is already playing, and its index is different than the one we just clicked on, pause it !
        });
    });
});

jQuery部分不在firefox和opera中工作

1 个答案: