jQuery.show 问题（Safari iPad）

Question

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

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

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');
}

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

Answer 2

只是想 post 我想出了一个解决方案，它可能不是最好的，但似乎有效。我只是改变了 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 上似乎一切正常，不确定这是第 nth-child 和我的 iPad 上的 safari 版本的问题还是我的问题代码，但它似乎有效。

jQuery.show 问题（Safari iPad）

jQuery .show issue (Safari iPad)

html

javascript

css

jquery

ipad