1

我环顾了整个网站，但找不到我想要的答案。也许我的知识太少了，但我正在努力学习更多。

事情是这样的，我有这个包含几部电影的网站，在我的数据库中进行搜索后，我只返回用户的基本数据以及与搜索参数相对应的电影，其余数据我想放入具有显示和隐藏相同 div 选项的 div。

这就是我到目前为止所拥有的：

<script type='text/javascript'>
function showDiv() {
   document.getElementById('hiddenDiv').style.display = "block";
}
</script>

<div id="hiddenDiv"  style="display:none;" class="answer_list" > WELCOME</div>
<input type="button" name="answer" value="Show Div" onclick="showDiv()" />

详细信息：我使用 php echo 打印所有内容。

非常感谢你！

附加信息：

所有结果都显示在同一页面中，这意味着所有 div 具有相同的名称。

我已将我的 div 代码更改为：

echo "<div id='$dados[id]'  style='display:none;' class='answer_list' >";

$dados[id] returns me the id of the data in my db.

I want to change:

document.getElementById('hiddenDiv') to something like document.getElementById('$dados[id') <-- Shows only the last div.

可以做到吗？

结果来自：

while ($dados = mysql_fetch_array($query))
4

4 回答 4

1

试试这个：

<script type='text/javascript'>
    function showDiv() {
        if (document.getElementById('hiddenDiv').style.display == 'block') {
            document.getElementById('hiddenDiv').style.display = 'none';
        } else {
            document.getElementById('hiddenDiv').style.display = 'block';
        }
    }
</script>
<div id="hiddenDiv"  style="display:none;" class="answer_list" >
    WELCOME
</div>
<input type="button" name="answer" value="Show Div" onclick="showDiv()" />

一个功能完成所有工作。话虽这么说，jQuery切换非常好。

于 2013-01-07T17:43:35.913 回答
0 
<script type='text/javascript'>
function showDiv() {
   document.getElementById('hiddenDiv').style.display = "block";
   document.getElementById('showDivButton').style.display = "none";
}
function hideDiv() {
   document.getElementById('hiddenDiv').style.display = "none";
   document.getElementById('showDivButton').style.display = "block";
}
</script>

<div id="hiddenDiv"  style="display:none;" class="answer_list" >
  WELCOME
  <input type="button" id="hideDivButton" value="Hide Div" onclick="hideDiv()" />
</div>
<input type="button" id="showDivButton" value="Show Div" onclick="showDiv()" />

或者使用一个框架，比如 Dojo（或者甚至 jQuery，如果它绝对没有帮助的话）

于 2013-01-07T17:43:25.410 回答
0

示例 Javascript + Html：

<script language="javascript"> 
function toggle() {
    var ele = document.getElementById("toggleText");
    var text = document.getElementById("displayText");
    if(ele.style.display == "block") {
        ele.style.display = "none";
        text.innerHTML = "show";
    } else {
        ele.style.display = "block";
        text.innerHTML = "hide";
    }
} 
</script>

<a id="displayText" href="javascript:toggle();">show</a> <== click Here
<div id="toggleText" style="display: none"><h1>peek-a-boo</h1></div>

注意：术语“切换”表示显示/隐藏元素。

这里还有一些其他很好的例子：

http://csscreator.com/node/708#xcomment-3123

http://psoug.org/snippet/Javascript-Smooth-Div-ShowHide_236.htm

于 2013-01-07T17:54:34.080 回答
0 
<script type='text/javascript'>
function showadve() {
    if (document.getElementById('hiddenadve').style.display == 'none') {
        document.getElementById('hiddenadve').style.display = 'block';
    } else {
        document.getElementById('hiddenadve').style.display = 'none';
    }
}
</script>
<div id="hiddenadve" class="answer_list" >
    WELCOME
</div>
<input type="button" name="answer" value="Show Div" onclick="showadve()" />
<a href="#" onclick="showadve()">all close</a>`

这是我的

于 2013-11-20T04:29:52.050 回答