Отображение и скрытие функций с помощью Jquery

Question

Я новичок в JQuery, Вот мой код:

<script type="text/javascript"> 
      $(document).ready(function() { 
       $('.toAdd').hide(); 

       var count = 0; 
       $('#add').on('click', function() { 
        $('.toAdd:eq(' + count + ')').show(); 
        count++; 
       }); 
      }); 

</script> 
<div class="toAdd">One</div><div class="toAdd">Two</div><div class="toAdd">Three</div> 
<input type="button" value="show" id="add"/> 
<input type="button" value="hide" id="sub"/> 

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

Fiddle here

Answer 1

Надежда это может помочь вам ... :)

    $('#sub').on('click', function() { 
         if(count > 0){ 
          count--; 
         $('.toAdd:eq(' + count + ')').hide(); 
         } 

        }); 

Answer 2

Попробуйте это тоже

<script type="text/javascript"> 
      $(document).ready(function() { 
       $('.toAdd').hide(); 

       $('#add').on('click', function() { 
        $('.toAdd,.hidden').first().show().addClass("shown").removeClass("hidden"); 
       }); 
       $('#sub').on('click', function() { 
        $('.toAdd,.shown').last().hide().addClass("hidden").removeClass("shown"); 
       }); 
      }); 

Answer 3

Попробуйте это, это будет работать с вами очень хорошо

$('.toAdd').hide(); 
    $('#add').click(function(){ 
    $('div').each(function(key, value) { 

      $(value).delay(key * 500).fadeIn(500); 

     });}); 
     $('#sub').click(function(){ 
     $('div').each(function(key, value) { 

      $(value).delay(key * 500).fadeOut(500); 

     }); 
}); 

Fiddle Here

Answer 4

$(document).ready(function() { 
    $('.toAdd').hide(); 

    var count = 0; 
    $('#add').on('click', function() { 
     $('.toAdd:eq(' + count + ')').show(); 
     count++; 
    }); 
    var deCount = count; 
    $('#sub').on('click', function() { 
     count--; 
     $('.toAdd:eq(' + count + ')').hide(); 
    }); 
}); 

Answer 5

Отредактировано jsfiddle по Outlooker

if($('.toAdd:eq(' + count + ')').is('*')) 

Добавлена ​​проверка пункт существования.

Fiddle

Answer 6

Попробуйте

var $toAdds = $('.toAdd').hide(); 

var count = 0; 
$('#add').on('click', function() { 
    if (count < $toAdds.length) { 
     $toAdds.eq(count).show(); 
     count++; 
    } 
}); 
$('#sub').on('click', function() { 
    if (count > 0) { 
     count--; 
     $toAdds.eq(count).hide(); 
    }  
}); 

Demo: Fiddle

Answer 7

Ответ Outlooker является правильным, но есть немного битовая ошибка. when user will click on show button 4th time then your hide doesn't work as expected. Так что я просто исправлю кусок здесь и пообщаюсь с вами, ребята.

HTML код:

<div class="toAdd">One</div> 
<div class="toAdd">Two</div> 
<div class="toAdd">Three</div> 
<input type="button" value="show" id="add" /> 
<input type="button" value="hide" id="sub" /> 

Java Script код:

/** 
* Hide all Content div 
*/ 
$(".toAdd").hide(); 
/** 
* Total no of content div find out 
**/ 
var lengthDiv = $(".toAdd").length; 
/** 
* Default count declare 
**/ 
var count = 0; 
/** 
* Click on show button 
**/ 
$('#add').on('click', function() { 
    if (count < lengthDiv) { 
     $('.toAdd:eq(' + count + ')').show(); 
     count++; 
    } 
}); 
/** 
* Click on hide button 
**/ 
$('#sub').on('click', function() { 
    if (count > 0) { 
     count--; 
     $('.toAdd:eq(' + count + ')').hide(); 
    } 
}); 

Fiddle Example