Question

我有一个简单的div淡出滑块，适用于Chrome，Firefox和我的iPad，但不会在Safari浏览器中触发。下一个/后一个锚点没有触发该函数。他们甚至没有在悬停时显示小指。有没有人遇到这个问题或知道可能的解决方案？

window.onload = function () {
$(".divs div").each(function(e) {
    if (e != 0)
        $(this).hide();
});

$("#next").click(function(){
    if ($(".divs div:visible").next().length != 0)
        $(".divs div:visible").fadeOut(function(){
            $(this).next().fadeIn();
        });
    else {
        $(".divs div:visible").fadeOut(function(){
            $(".divs div:first").fadeIn();
        });
    }
    return false;
});

$("#prev").click(function(){
    if ($(".divs div:visible").prev().length != 0)
        $(".divs div:visible").fadeOut(function(){
            $(this).prev().fadeIn();
        });
    else {
        $(".divs div:visible").fadeOut(function(){
            $(".divs div:last").fadeIn();
        });
    }
    return false;
});
}

HTML

<div class="divs">

<div class="cls1">..image/text..</div>
<div class="cls2">..image/text..</div>
<div class="cls3">..image/text..</div>
...

</div>

<a id="prev" href="#"></a>
<a id="next" href="#"></a>

Answer 1

我在Safari上测试了你的脚本，它对我有用。也许你应该尝试linting你的脚本。即使它没有解决问题，它肯定会避免将来破坏脚本：

$(".divs div").each(function (e) {
    if (e !== 0) {
        $(this).hide();
    }
});

$("#next").click(function () {

    if ($(".divs div:visible").next().length !== 0) {
        $(".divs div:visible").fadeOut(function () {
            $(this).next().fadeIn();
        });
    } else {
        $(".divs div:visible").fadeOut(function () {
            $(".divs div:first").fadeIn();
        });
    }
    return false;
});

$("#prev").click(function () {

    if ($(".divs div:visible").prev().length !== 0) {
        $(".divs div:visible").fadeOut(function () {
            $(this).prev().fadeIn();
        });
    } else {
        $(".divs div:visible").fadeOut(function () {
            $(".divs div:last").fadeIn();
        });
    }
    return false;
});

小提琴：http://jsfiddle.net/624wu49h/

Jquery div幻灯片无法在Safari中运行（适用于Chrome，FF。）

1 个答案: