Question

我尝试制作推荐书并且下一个按钮工作正常，但是当我点击第一次点击工作时返回（上一个）按钮但是当点击下一个并再次单击后面时，代码停止工作，我不知道问题是什么.........：/ 这是我的代码..

＆＃13;

$(document).ready(function() {
    var peopleOpinion = $(".people-opinion:first");
    var peopleCount = $(".people-opinion").length; // 9 items(div)
        // one row have 3 items(div)
        // 4.5 = one click
    var clicksNum = Math.round(peopleCount / 4.5);
    var pre = $(".previous");
    var next = $(".next");
    var marginLeft = -300;
    var clicks = 1;
    next.on('click', function() {
        if (clicks <= clicksNum && !(marginLeft == 0)) {
            peopleOpinion.css({"margin-left" : marginLeft + "px"});
            marginLeft += -300;
            clicks++;
        } else if (marginLeft == 0) {
            peopleOpinion.css({"margin-left" : "-300px"});
            clicks++;
        } else {
            peopleOpinion.css({"margin-left" : "0px"});
            marginLeft = -300;
            clicks = 1;
        }
    });
    pre.on('click', function() {
        if (!(marginLeft == 0)) {
            marginLeft += 300;
            peopleOpinion.css({"margin-left" : marginLeft + "px"});
        }
    });
});

＆＃13;

.container {
  display: flex;
  overflow: hidden;
  width: 290px;
  border: 2px solid #DDD;
}
.container .people-opinion {
  display: inline-block;
  max-width: 29%;
  flex: 0 0 100%;
  padding: 3px;
  margin: 10px 0px 10px 10px;
  transition: all 1s ease-in-out;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="people-opinion">Hello world111</div>
  <div class="people-opinion">Hello world222</div>
  <div class="people-opinion">Hello world333</div>
  <div class="people-opinion">Hello world444</div>
  <div class="people-opinion">Hello world555</div>
  <div class="people-opinion">Hello world666</div>
  <div class="people-opinion">Hello world777</div>
  <div class="people-opinion">Hello world888</div>
  <div class="people-opinion">Hello world999</div>
</div>
<button class="next">Next</button>
<button class="previous">previous</button>

＆＃13;

Answer 1

好的这是你需要的代码......但是让我先解释一些事情

首先，您需要知道在css中使用%不需要边距而且不需要填充..控制没有边距和填充的百分比会更好

＆＃13;

$(document).ready(function() {
    var containerWidth = $('.container').width();
    var peopleOpinion = $(".people-opinion:first");
    var peopleCount = $(".people-opinion").length; // 9
    var clicksNum = peopleCount / 3;
    var pre = $(".previous");
    var next = $(".next");
    var clicks = 1;
    next.on('click', function() {
        if (clicks < clicksNum) {
            peopleOpinion.css({"margin-left" : - containerWidth * clicks + "px"});
            clicks++;
        }
    });
    pre.on('click', function() {
        var pclicks = clicksNum - clicks - 1;
        if (clicks <= clicksNum && clicks !== 1) {
            peopleOpinion.css({"margin-left" : + containerWidth * pclicks + "px"});
            clicks--;
        }
    });

    // if you working on a responsive website you may need to use `resize` and update the container width
    $(window).on('resize' , function(){
        containerWidth = $('.container').width();
    });
});

＆＃13;

.container {
  display: flex;
  overflow: hidden;
  width: 100%;
  border: 2px solid #DDD;
}
.container .people-opinion {
  display: inline-block;
  transition: all 1s ease-in-out;
  max-width : 33.33333333%;
  flex: 0 0 100%;
}
.people-opinion > div{
  margin : 4px;
  padding : 2px;
  background : red;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="people-opinion"><div>Hello world111</div></div>
  <div class="people-opinion"><div>Hello world111</div></div>
  <div class="people-opinion"><div>Hello world111</div></div>
  <div class="people-opinion"><div>Hello world111</div></div>
  <div class="people-opinion"><div>Hello world111</div></div>
  <div class="people-opinion"><div>Hello world111</div></div>
  <div class="people-opinion"><div>Hello world111</div></div>
  <div class="people-opinion"><div>Hello world111</div></div>
  <div class="people-opinion"><div>Hello world111</div></div>
</div>
<button class="next">Next</button>
<button class="previous">previous</button>

＆＃13;

-Explanation

虽然您在people-opinion上有边距和填充，但却使用290px和29%而且完全错误..请使用您需要的确切宽度300px因为我在.people-opinion > div内包裹了另一个div people-opinion并为其设置了样式..在我的代码中我使其响应所以我将容器宽度设置为100%
在上一个按钮中，您需要使用var pclicks = clicksNum - clicks - 1;，这样您才能获得前一步所需的正确点击次数..

Answer 2

一旦marginLeft为0且clicks大于2，则允许发生的唯一操作是：

peopleOpinion.css({"margin-left" : "-300px"});
clicks++;

我简化了你的逻辑，这似乎有效：

var slot = 0;
next.on('click', function() {
    slot++;
    slot=slot%3;
    peopleOpinion.css({"margin-left": (slot*-300)+ "px"});                                                    
});
pre.on('click', function() {
    slot--;
    if (slot < 0)
      slot = 2;
    peopleOpinion.css({"margin-left": (slot*-300)+ "px"});
});

如果我们有一个像pages = Math.ceil(people/3)这样的变量并使用它而不是上面的常量，这甚至可以进一步推广。

推荐书上一页按钮jquery

2 个答案: