1

Сейчас если использовать один список, то все работает, но если вставить второй, то при клике в первом, а во втором он уже продолжает, мне нужно чтобы они работали по отдельности не продолжая друг друга, в примере это видно.

    var i = 1;
    $('.calc .right').click(function () {
        var cont_slide = $(this).closest('.box-cont').attr('id');
        if (i < $(".calc #"+cont_slide+" ul li").length) {
            $(".calc #"+cont_slide+" ul li").removeClass('current');
            $(".calc #"+cont_slide+" .box" + i).next().addClass('current');
            i++;
        }
    });
    $('.calc .left').click(function () {
        var cont_slide = $(this).closest('.box-cont').attr('id');
        if (i > 1) {
            $(".calc #"+cont_slide+" ul li").removeClass('current');
            $(".calc #"+cont_slide+" .box" + i).prev().addClass('current');
            i--;
        }
    });
.calc .box-cont {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.calc .move {
    text-align: center;
    padding: 20px 20px 0;
    background: #fff;
    color: #000;
}
.calc .left,
.calc .right {
    cursor: pointer;
    display: block;
    font-size: 20px;
    line-height: 3px;
}
.calc ul{
    list-style: none;
    padding: 0;
    margin: 0;
}
.calc li{
    width: 100px;
    margin: auto;
    background: #ABA38F;
    color: #fff;
    padding: 5px;
    display: none;
    text-align: center;
}
.calc li.current {
    display: block;
}
.calc li span{
    width: 150px;
    text-align: center;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="calc">
    <div id="box" class="box-cont">
        <span class="move left"><</span>
        <ul>
            <li class="box1 current"><span>1</span></li>
            <li class="box2"><span>2</span></li>
            <li class="box3"><span>3</span></li>
            <li class="box4"><span>4</span></li>
            <li class="box5"><span>5</span></li>
            <li class="box6"><span>6</span></li>
            <li class="box7"><span>7</span></li>
            <li class="box8"><span>8</span></li> 
        </ul>
        <span class="move right">></span>
    </div>
    <div id="box2" class="box-cont">
        <span class="move left"><</span>
        <ul>
            <li class="box1 current"><span>1</span></li>
            <li class="box2"><span>2</span></li>
            <li class="box3"><span>3</span></li>
            <li class="box4"><span>4</span></li>
            <li class="box5"><span>5</span></li>
            <li class="box6"><span>6</span></li>
            <li class="box7"><span>7</span></li>
            <li class="box8"><span>8</span></li> 
        </ul>
        <span class="move right">></span>
    </div>
</div>

1
  • var i = 1; - вот сюда считывай текущую цифру из box1 current и объяви внутри эту переменную. Если идеи не хватило, ща напишем
    – user199604
    21 фев 2019 в 14:44

1 ответ 1

2

$('.calc .right').click(function() {
  var i = +$(this).closest('.box-cont').data("i") || 1;
  var cont_slide = $(this).closest('.box-cont').attr('id');
  if (i < $(".calc #" + cont_slide + " ul li").length) {
    $(".calc #" + cont_slide + " ul li").removeClass('current');
    $(".calc #" + cont_slide + " .box" + i).next().addClass('current');
    $(this).closest('.box-cont').data("i", i + 1);
  }
});
$('.calc .left').click(function() {
  var i = +$(this).closest('.box-cont').data("i") || 1;
  var cont_slide = $(this).closest('.box-cont').attr('id');
  if (i > 1) {
    $(".calc #" + cont_slide + " ul li").removeClass('current');
    $(".calc #" + cont_slide + " .box" + i).prev().addClass('current');
    $(this).closest('.box-cont').data("i", i - 1);
  }
});
.calc .box-cont {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.calc .move {
  text-align: center;
  padding: 20px 20px 0;
  background: #fff;
  color: #000;
}

.calc .left,
.calc .right {
  cursor: pointer;
  display: block;
  font-size: 20px;
  line-height: 3px;
}

.calc ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.calc li {
  width: 100px;
  margin: auto;
  background: #ABA38F;
  color: #fff;
  padding: 5px;
  display: none;
  text-align: center;
}

.calc li.current {
  display: block;
}

.calc li span {
  width: 150px;
  text-align: center;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="calc">
  <div id="box" class="box-cont">
    <span class="move left"><</span>
    <ul>
      <li class="box1 current"><span>1</span></li>
      <li class="box2"><span>2</span></li>
      <li class="box3"><span>3</span></li>
      <li class="box4"><span>4</span></li>
      <li class="box5"><span>5</span></li>
      <li class="box6"><span>6</span></li>
      <li class="box7"><span>7</span></li>
      <li class="box8"><span>8</span></li>
    </ul>
    <span class="move right">></span>
  </div>
  <div id="box2" class="box-cont">
    <span class="move left"><</span>
    <ul>
      <li class="box1 current"><span>1</span></li>
      <li class="box2"><span>2</span></li>
      <li class="box3"><span>3</span></li>
      <li class="box4"><span>4</span></li>
      <li class="box5"><span>5</span></li>
      <li class="box6"><span>6</span></li>
      <li class="box7"><span>7</span></li>
      <li class="box8"><span>8</span></li>
    </ul>
    <span class="move right">></span>
  </div>
</div>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.