javascript - jQuery .show 问题(Safari iPad)

Question

我最近开始学习 jQuery 并一直在开发一个响应式轮播来练习，但是我遇到了一个奇怪的问题，即 .show() 在 iPad 的 Safari 上似乎无法正常工作。

我遇到的问题是，当我单击向左箭头时，我希望显示第二张幻灯片，但这似乎不起作用(适用于所有其他浏览器，包括 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