Question

我有php array存储divs IDs。我也有 JS 功能：

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

当我点击我的html页面中的单个按钮时，我想使用此功能一个接一个地显示div（点击按钮 - ＆gt;显示div，再次点击相同按钮 - ＆gt;显示下一个div ，... ）。

我尝试在php数组中循环，在其间插入 html 代码并使用onclick HTML属性。

<?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

我认为你正在寻找类似的东西。

你的php：

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

你的html / javascript .hidden {display：none; }

<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，

从php获取所有ids并在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人员：）

显示其ID存储在php数组中的div

2 个答案: