Question

我最近开始学习jQuery，并且一直在开发一个响应式旋转木马来练习但是我遇到了一个奇怪的问题，其中.show（）似乎无法在Safari的iPad上正常工作。

我遇到的问题是，当我单击左箭头时，我希望显示第二张幻灯片，但这似乎不起作用（适用于所有其他浏览器，包括适用于iPad的Chrome），如果我将代码更改为显示第三张幻灯片，而不是第二张幻灯片，所以我觉得这个问题与显示一个直接的兄弟姐妹有关。

HTML

<div class="wrapper">  
<div class="carousel">
    <div class="inner">
        <div class="slide" data-index="1"></div>
        <div class="slide" data-index="2"></div>
        <div class="slide" data-index="3"></div>
    </div>
    <div class="arrow left"></div>
    <div class="arrow right"></div>
</div>

CSS

.wrapper {
    max-width: 1200px;
    margin: 0 auto; 
    position: relative;
    width: 100%;
 }

.carousel {
    padding-top: 40%; /*((slide-height/max-width)*100)*/
    position: relative;
    width: 100%;
 }

.inner {
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
 }

.slide {
    background-size: 100%;
    display: none;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    overflow: auto;
 }

    .slide:nth-child(1) {
        background-image: url("http://i58.tinypic.com/14mqkpe.png");
        display: block;
    }

    .slide:nth-child(2) {background-image: url("http://i62.tinypic.com/11t5t1h.png")}

    .slide:nth-child(3) {background-image: url("http://i57.tinypic.com/2pquruu.png")}   

.arrow {
    border-top: 3px solid #fff;
    cursor: pointer;
    padding-top: 2%;
    position: absolute;
    top: 50%;
    width: 2%;
 }

    .arrow.left {
        -moz-transform-origin: 0 0;
        -moz-transform: rotate(-45deg);
        -webkit-transform-origin: 0 0;
        -webkit-transform: rotate(-45deg);
        border-left: 3px solid #fff;
        left: 2%;
        transform-origin: 0 0;
        transform: rotate(-45deg);
     }

    .arrow.right {
        -moz-transform-origin: 100% 0;
        -moz-transform: rotate(45deg);
        -webkit-transform-origin: 100% 0;
        -webkit-transform: rotate(45deg);
        border-right: 3px solid #fff;
        right: 2%;
        transform-origin: 100% 0;
        transform: rotate(45deg);
     }

的jQuery

;(function ( $, window, document, undefined ) {
    var pluginName = "Carousel",
        defaults = {           
        };

    function update_slides(element, options){   
    };

    function Plugin( element, options ) {
        this.element = $(element);

        this.options = $.extend( {}, defaults, options) ; 

        var initials = {        
        }

        $.extend( {}, initials, this.options);    

        this._defaults = defaults;
        this._name = pluginName;

        this.init();        
    }

    Plugin.prototype = {

        init: function() {
            this.manual_navigation(this.element, this.options)
        },

        manual_navigation: function( element, options ) {
            element.find('.arrow.left').click(function() {
                element.find('.slide[data-index="1"]').removeClass('show');
                element.find('.slide[data-index="1"]').addClass('hide');
                element.find('.slide[data-index="2"]').removeClass('hide');
                element.find('.slide[data-index="2"]').addClass('show');
            });
            element.find('.arrow.right').click(function() {
                element.find('.slide[data-index="3"]').show();
            });
        }
    };

    $.fn[pluginName] = function ( options ) {
        return this.each(function () {
            if (!$.data(this, "plugin_" + pluginName)) {
                $.data(this, "plugin_" + pluginName,
                new Plugin( this, options ));
            }
        });
    };

})( jQuery, window, document );

$(document).ready(function() {
    $(".carousel").Carousel();
});

我认为问题可能与宽度为100％的.wrapper有关，因为如果我将其更改为50％，一切似乎都有效，遗憾的是我想要使用旋转木马的网站需要宽度为100 ％。

感谢您一看，希望有人之前遇到过类似的事情。

Answer 1

创建两个css类

.show
{
display:none!important;
}
.hide
{
display:block!important;
}

现在可以在要隐藏或显示时在类之间切换。

例如

if($(selector).hasClass('show')){
$(selector).removeClass('show');
$(selector).addClass('hide');
}else{
{
$(selector).removeClass('hide');
$(selector).addClass('show');
}

另一位用户遇到了类似的问题已经解决了

replacing css "display:none" value with "display:flex using js

Answer 2

想到我发布了一个我想出的解决方案，它可能不是最好的，但似乎有效。我只是改变了css

.slide:nth-child(1) {
    background-image: url("http://i58.tinypic.com/14mqkpe.png");
    display: block;
}

.slide:nth-child(2) {background-image: url("http://i62.tinypic.com/11t5t1h.png")}

.slide:nth-child(3) {background-image: url("http://i57.tinypic.com/2pquruu.png")}

以下

.slide[data-index="1"] {
        background-image: url("http://i58.tinypic.com/14mqkpe.png");
        display: block;
    }

.slide[data-index="2"] {background-image: url("http://i62.tinypic.com/11t5t1h.png")}

.slide[data-index="3"] {background-image: url("http://i57.tinypic.com/2pquruu.png")}

并且一切似乎在iPad上都能正常工作，不确定这是否与我的iPad上的nth-child和safari版本有关，或者它是否与我的代码有关但它似乎有效。

jQuery .show问题（Safari iPad）

2 个答案: