показать/скрыть divs jQuery

Question

Я хочу иметь 4-8 «скрытых» divs на странице. Затем также есть 2 кнопки, один «плюс» и один «удалить». Когда я нажимаю кнопку «плюс», он показывает первый div, и если я снова нажимаю кнопку «плюс», он показывает div nr 2. И если я использую «remove», он удаляет div.

Должен ли я использовать условные заявления или есть ли какое-либо простое решение?

$(document).ready(function() { 
$('#show').click(function() { 
    $("#hiddencontent").fadeIn("slow"); 
    }); 
}); 

Answer 1

ID «s уникальны, вы не можете использовать их снова и снова, изменить id="hiddencontent" к class="hiddencontent" затем следуют ниже.

Demo jsFiddle

$(document).ready(function() { 
    var index = 0; 
    $('#show').click(function() { 
     $('div').eq(index).fadeIn('slow'); 
     if(index < $('div').length){ 
      index++; 
     }else{ 
      alert('There is no more hidden content!'); 
     } 
    }); 
    $('#remove').click(function(){ 
     $('div').eq(index -1).remove(); 
    }); 
});​ 

JQuery-х .eq() имеет zero based index. Мы устанавливаем переменную вне функции щелчка, но все еще доступны для области щелчка, и мы последовательно переключаем hiddencontent. Когда мы нажмем, он изменит индекс с 0 > 1 > 2 > 3 и так далее. Мы проверяем, меньше ли индекс меньше текущего количества элементов, соответствующих классу hiddencontent, и если он проходит, мы перебираем индекс в следующее целое число.

Функция удаления не требует изменения итератора, так как она только хочет удалить последний индексированный элемент (насколько я могу судить по вашему сценарию).

Это должно быть сделано.

Answer 2

Следующий код покажет первый div с дисплеем none.

$(document).ready(function() { 
     $('#show').click(function() {  
      $("div").filter(function() { 
       return $(this).css("display") == "none" 
      }).first().show(); 
     }); 

Скрыть последние показанные div.

 $('#remove').click(function() { 
      $("div").filter(function() { 
       return $(this).css("display") !== "none" 
      }).last().hide(); 
     }); 
    }); 

Answer 3

Вы можете, вероятно, попробовать что-то вроде

$("div:hidden").first().show(); 

и

$("div:visible").last().hide(); 

Answer 4

Дайте DIVS общий класс для простоты выбора, а затем вы можете сделать это:

var $divs = $(".hideShow").hide(); // cache a reference to the relevant divs, 
            // and start with them hidden 
$("#show").click(function() { 
    $divs.filter(":hidden").first().fadeIn(); 
}); 
$("#hide").click(function() { 
    $divs.not(":hidden").last().fadeOut(); 
});​ 

Demo : http://jsfiddle.net/ua9ef/2/

:hidden selector позволяет вам манипулировать только скрытыми или просто скрытыми скрытыми .not(). (Или, конечно, вы можете использовать :visible selector ...)

Answer 5

http://jsfiddle.net/z9s8T/

CSS

div{ 
    display:none; 
} 
div.show{ 
    display:block; 
} 
​ 

HTML

<button id="show">show</button> 
<button id="hide">hide</button> 

<div>1</div> 
<div>2</div> 
<div>3</div> 
<div>4</div> 

JS

$(function(){ 
    $('#show').click(function(){ 
     $('div:not(.show):eq(0)').addClass('show'); 
    }); 
    $('#hide').click(function(){ 
     $('div.show:last').removeClass('show'); 
    }); 
});​ 

Answer 6

Вот простой fiddle используя класс .hidden (плохое имя) для элементов, которые будут скрыты, обнаружены и скрыты снова. Затем я использую селектора :hidden и :visible.

$("#add").click(function() { 
    $(".hidden:hidden").first().show(); 
}); 

$("#remove").click(function() { 
    $(".hidden:visible").last().hide(); 
}); 

Answer 7

Проверить это

var index = -1; 
var max = $('.container > div').length; 
$('#show').on('click', function() { 
    if (index + 1 > max) { 
     // Do Nothing 
    } else { 
     if (index < max - 1) { 
      index++; 
      $('.container > div:eq(' + index + ')').show(); 
     } 


    } 
}); 

$('#hide').on('click', function() { 
    if (index == -1) { 
     index = 0; 
    } 
    else { 
     if ($('.container > div:eq(' + index + ')').is(':visible')) { 
      $('.container > div:eq(' + index + ')').hide(); 
      index--; 
     } 
    } 
});​ 

Check Fiddle