jQuery没有在第一次点击时触发

Question

我正在制作一个自定义 jQuery 滑块，无论出于何种原因，我的 jQuery 函数在第一次点击时不会触发，只会在后续点击时触发。

我在 stackoverflow 中搜索了解决方案，但似乎没有一个与我的问题相符。这是我的代码：

  var theTestimonial = jQuery('.testimonial-wrapper');
    var theWidth = theTestimonial.width();
    var widthCount = theWidth;

    jQuery('.testimonial-container').wrap('<div class="extra-wrapper"></div>');
    jQuery('.testimonial-container').css('margin-left', '0px');

    jQuery('.extra-wrapper').css({
        width: function() {
        return theWidth;
      }, 
        position: 'relative',
        overflow: 'hidden'      
    });

    //get total of image sizes and set as width for ul 
    var totalWidth = theTestimonial.length * theWidth;
    jQuery('.testimonial-container').css({
        width: function(){
            return totalWidth;
        }               
    });


    jQuery('.next').on("click", function () {
        if (widthCount < totalWidth) {
            widthCount = widthCount + 995;

            jQuery('.testimonial-container').animate({
                "margin-left": theWidth = theWidth - 996
            }, 750);    
        } 
    });

    jQuery('.prev').on("click", function () {
        if (widthCount >= totalWidth && widthCount > 0) {
            jQuery('.testimonial-container').animate({
                "margin-left": theWidth = theWidth + 996
            }, 750);    
            widthCount = widthCount - 996;
        } 
    });

HMTL:

        <div class="testimonial-outer">
            <span class="prev"><</span>
            <span class="next">></span>

        <div class="wrapper testimonial-container">
            <?php if( have_rows('testimonials') ) : ?>
            <?php while( have_rows('testimonials') ) : the_row(); ?>
            <div class="testimonial-wrapper">
                <div class="section-title">
                    <h3><?php echo the_sub_field('section_title',$postID);?></h3>
                </div>
                <div class="testimonial">
                    <div class="testimonial-left">
                        <img src="<?php the_sub_field('testimonial_image',$postID);?>" alt="">
                    </div>
                    <div class="testimonial-right">
                        <div class="testimonial-right-inner">
                            <?php the_sub_field('testimonial_copy',$postID);?>
                            <span><?php the_sub_field('testimonial_by',$postID);?></span>
                        </div>
                    </div>
                </div>
            </div>
            <?php endwhile; ?>
            <?php endif; ?>
            <div class="clear"></div>
        </div>
    </div>

CSS

.testimonial-outer {
        float: left;
        width: 100%;
        background: #fbb52e;
        padding: 40px 0 74px;
    }

    .testimonial-outer .section-title h3 {
        color: #fff;
    }

    .wrapper {
        width: 996px;
        margin: 0 auto;
    }

    .testimonial-outer .testimonial {
        float: left;
        width: 100%;
        padding: 37px 0 0;
    }

    .testimonial-left {
        float: left;
        width: 32.3%;
    }

    .testimonial-left img {
        max-width: 100%;
    }

    .testimonial-right {
        float: right;
        width: 65%;
        padding: 50px 0 0 70px;
        background: url(images/quote-start.png) no-repeat left top;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        margin: 43px 0 0;
    }

    .testimonial-right-inner {
        float: right;
        width: 100%;
        background: url(images/quote-end.png) no-repeat right 90%;
        padding: 0 70px 0 0;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
    }

    .testimonial-right p {
        margin: 0 0 11px 0;
        color: #555555;
        font-family: Calibri;
        font-size: 15px;
        line-height: 20px;
    }

    .testimonial-right span {
        float: right;
        color: #555555;
        font-family: Calibri;
        font-size: 20px;
        line-height: 24px;
        font-weight: bold;
    }

    .clear {
        clear: both;
    }

    .testimonial-container {
        margin-left: 0px;
    }

    .testimonial-wrapper {
        float: left;
        width: 996px;
    }

    .extra-wrapper {
        margin: 0 auto;
    }

    .testimonial-outer {
        position: relative;
    }

    .next {
        color: white;
        z-index: 5;
        position: absolute;
        right: 2%;
        top: 34%;
        font-size: 78px;
        cursor: pointer;
        background: rgba(30, 30, 30, .5);
        width: 50px;
        height: 50px;
        display: inline-block;
        line-height: 45px;
        padding: 15px;
        text-align: center;
        border-radius: 100%;
        border: 3px solid #c48100;
        -webkit-transition: all .25s ease-in-out;
        -moz-transition: all .25s ease-in-out;
        -ms-transition: all .25s ease-in-out;
        -o-transition: all .25s ease-in-out;
        transition: all .25s ease-in-out;
    }

    .next:hover {
        color: #fbb52e;
        background: white;
        border: 3px solid white;
    }

    .prev {
        color: white;
        z-index: 5;
        position: absolute;
        left: 2%;
        top: 34%;
        font-size: 78px;
        cursor: pointer;
        background: rgba(30, 30, 30, .5);
        width: 50px;
        height: 50px;
        display: inline-block;
        line-height: 45px;
        padding: 15px;
        text-align: center;
        border-radius: 100%;
        border: 3px solid #c48100;
        -webkit-transition: all .25s ease-in-out;
        -moz-transition: all .25s ease-in-out;
        -ms-transition: all .25s ease-in-out;
        -o-transition: all .25s ease-in-out;
        transition: all .25s ease-in-out;
    }

    .prev:hover {
        color: #fbb52e;
        background: white;
        border: 3px solid white;
    }

Answer 1

我对 javascript 做了一些更改，我认为第一次点击问题是在动画部分，它在计算新边距之前是动画。为了保持一致性，我还更新了 Width 变量的一些值。

.prev 点击上的 if 语句也阻止了滑块返回，因为 widthCount 没有超过 totalWidth。

https://jsfiddle.net/xyvzdenj/

var theTestimonial = jQuery('.testimonial-wrapper');
var theWidth = theTestimonial.width();
var widthCount = theWidth;

jQuery('.testimonial-container').wrap('<div class="extra-wrapper"></div>');
jQuery('.testimonial-container').css('margin-left', '0px');

jQuery('.extra-wrapper').css({
    width: function () {
        return theWidth;
    },
    position: 'relative',
    overflow: 'hidden'
});

//get total of image sizes and set as width for ul 
var totalWidth = theTestimonial.length * theWidth;
jQuery('.testimonial-container').css({
    width: function () {
        return totalWidth;
    }
});


jQuery('.next').on("click", function () {
    if (widthCount < totalWidth) {
        widthCount = widthCount + theWidth;

        jQuery('.testimonial-container').animate({
            "margin-left": "-=" + theWidth
        }, 750);
    }


});

jQuery('.prev').on("click", function () {
    if (widthCount > theWidth) {
        jQuery('.testimonial-container').animate({
            "margin-left": "+=" + theWidth
        }, 750);
        widthCount = widthCount - theWidth;
    }


});

Answer 2

仅供参考，我遇到了同样的问题，在第二次点击时触发了一个事件。原来原因很简单，一不小心换了动作：

$('.element').click(function{
  $(this).toggleClass('iWantAction');
  if($(this).hasClass('iWantAction')){
    sitStill(); //WRONG! Had to be doAction1();
  } else {
    doAction(); //WRONG! Had to be sitStill();
  }
})

所以，结果是一样的，直到第一次点击添加类然后第二次删除，事件才会触发