Jquery не получается сделать счетчик

224

20 апреля 2018, 13:56

$(document).ready(function(){
  var counter = 0;
    $('.unload').click(function(){
        $('.block').eq(counter).css({'visibility' : 'hidden'});
        if (counter < 9) {
        $('.block').eq(counter++).css({'visibility' : 'hidden'});
        }       
    });
    $('.load').click(function(){
        $('.block').eq(counter--).css({'visibility' : 'visible'});
        if (counter > 9) {
            $('.block').eq(counter).css({'visibility' : 'visible'});
        }
    });
});

.unload - класс кнопки, который убирает элемент ; .load - класс кнопки, который добавляет элемент. Нельзя добавлять если уже есть 9 элементов, и нельзя удалять если удалены 9 элементов.

Answer 1

Зачем так сложно? На странице есть 9 элементов. Все, что нужно - это показать первый невидимый или спрятать последний видимый. А если таких нет, то не делать ничего

jQuery(function($) { 
  $('.unload').click(function() { 
    $('.block:visible:last').hide(); 
  }); 
  $('.load').click(function() { 
    $('.block:hidden:first').show(); 
  }); 
});

.block { 
  display: none; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<button class="load">Add</button> 
<button class="unload">Remove</button> 
<div class="block">1</div> 
<div class="block">2</div> 
<div class="block">3</div> 
<div class="block">4</div> 
<div class="block">5</div> 
<div class="block">6</div> 
<div class="block">7</div> 
<div class="block">8</div> 
<div class="block">9</div>

Answer 2

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

$(".elements").find('div').eq(($(".elements div").length) - 1).remove();

$(document).on('ready', function(){ 
var maxElements = 9; 
var idElements = 1; 
 
function addElement(){ 
  console.log('Добавляем элемент'); 
  if($(".elements div").length == maxElements){ 
    alert('Нельзя добавить больше '+maxElements+' элементов'); 
    return false; 
  } 
 
  $(".elements").append("<div>Элемент: "+idElements+"</div>"); 
  idElements++; 
} 
 
function deleteElemet(){ 
  if($(".elements div").length == 0){ 
    alert('Нечего удалять'); 
    return false; 
  } 
  //Удаляем первый 
  $(".elements").find('div').eq(0).remove(); 
   
} 
 
$(".load").on('click', function(){ 
addElement(); 
}); 
$(".delete").on('click', function(){ 
deleteElemet(); 
}); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div class="elements"></div> 
<div class="load">Добавить элемент</div> 
<div class="delete">Удалить элемент</div>