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做了一些更改，我认为第一次点击问题是在animate部分，它是在计算新边距之前动画。我还将一些值更新为theWidth变量以保持一致性。

.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();
  }
})

所以，结果是一样的，事件没有触发，直到第一次点击添加课程，然后第二次删除

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

2 个答案: