показать divs, которые имеют свой идентификатор, хранящийся в php-массиве

Question

У меня есть php array, в котором хранятся divs IDs. У меня тоже есть этот JS функции:

function show(target) { 
    document.getElementById(target).style.display = 'block'; 
} 

Я хочу использовать эту функцию, чтобы показать дивы один за другие, когда я нажимаю на одной кнопке в моем HTML-странице (Нажмите кнопку -> показать DIV, нажмите ту же кнопку снова -> Показать следующий div, ...).

Я пробовал цикл через массив php, вставляя html код для кнопки между ними и используя атрибут HTML onclick.

<?php foreach ($subscheds as $subsched): ?> 
<button type="button" onclick="show('<?php print $subsched['id'] ?>');" 
         class="btn btn-success" style="float:left;">+</button>   
<?php endforeach ?> 

Это генерирует столько кнопок, сколько есть div, и это не то, что мне нужно.

Answer 1

Я думаю, что вы ищете что-то вроде этого.

РНР:

$divs = ["no1", "no2", "no3"]; 

Ваш HTML/JavaScript .hidden {дисплей: нет; }

<button id="showDiv">Show an extra div</button> 

<div class="hidden" id="no1">no1</div> 
<div class="hidden" id="no2">no2</div> 
<div class="hidden" id="no3">no3</div> 

<script> 
    // Track the number of divs currently not hidden 
    var divsShown = 0; 
    // The array with div id's 
    var divs = <?php echo json_encode($divs); ?>; 

    // Event handler, when the button is clicked 
    document.getElementById("showDiv").onclick = function(){ 
     // remove the hidden class 
     document.getElementById(divs[divsShown]).className = ""; 
     // increase the number of divs shown 
     divsShown++; 

     // Hide the button when all divs are shown 
     if(divsShown == divs.length) { document.getElementById("showDiv").className = "hidden";} 
    }; 
</script> 

Answer 2

Если вы хотите, чтобы показать все DIVs один за другим после нажатия на кнопку же затем,

просто взять все ids от PHP и использовать их в JavaScript. Подобно этому,

<script type="text/javascript"> 
var strIds = <?php foreach ($subscheds as $subsched):  
print $subsched['id'] ."," 
endforeach ?>; // this will create a string with comma separated ids at server-side only. (like 1,2,3,4,) 
var arrIds = strIds.split(','); 
var i = 0; // global variable to hold index value 

function show() { 
    if(i < (arrIds.length-1)) { // minus 1 to avoid last empty id 
     document.getElementById(arrIds[i]).style.display = 'block'; 
     i++; 
    } 
} 
</script> 

Надеется, что это помогает, дайте мне знать, если вы хотите получить больше помощи. Благодарю.

Примечание: «То, что вы на самом деле хотите» Пожалуйста, проверьте PHP код (петли и конкатенации) один раз, как я не PHP парень :)