jQuery不会在首次点击时触发 [英] jQuery not firing on first click

问题描述

我正在制作自定义的 jQuery 滑块，出于任何原因，我的 jQuery 函数不会在首次点击时触发，而只会在随后的点击时触发.

I'm making a custom jQuery slider and for whatever reason, my jQuery function is not firing on the first click, only subsequent clicks.

我已经在stackoverflow上搜索了解决方案，但是似乎没有一个与我的问题匹配.这是我的代码:

I've searched stackoverflow for solutions, but none of them seem to match my issue. Here is my code:

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

推荐答案

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

I made a few changes to the javascript, I think the first click issue was that on the animate section, it was animating before calculating the new margin. I also updated some values to theWidth variable for consistency.

.prev单击上的if语句还阻止了滑块的返回，因为widthCount不会超过totalWidth.

Also the if statement on the .prev click was stopping the slider getting back as widthCount doesn't get above 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;
    }


});

这篇关于jQuery不会在首次点击时触发的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！