Question

我正在创建与医疗帮助相关的论坛。患者会提出许多问题，医生会回答这些问题。我已在一页上显示了问题及其详细信息：

select * from queries

使用上面的查询。所有问题都以标题和描述的形式出现。

会有很多问题，只需考虑一个问题的回答，其中有4个回复。我准备好了代码以及

$viewDet = "select * from queries where queryCode = '". $qryId."'";

因此用户将看到4个回复的问题。每个回复都将以包含以下代码的块显示正确

<td width="166" height="69" align="center" valign="middle" style="border-right:1px solid #CCCCCC; border-bottom:1px solid #CCCCCC">Rate This Question </td>
    <td width="136" align="center" valign="middle" style="border-right:1px solid #CCCCCC; border-bottom:1px solid #CCCCCC; background-image:
            url(images/medalsgold1.png);background-position:center; background-repeat:no-repeat">
            <a href="#" > <span class="style1 style2">Gold</span> </a>
    </td>

    <td width="140" align="center" valign="middle" style="border-right:1px solid #CCCCCC; border-bottom:1px solid #CCCCCC; background-image:
            url(images/medalssilver1.png); background-position:center; background-repeat:no-repeat">
            <a href="#" ><span class="style1 style2"> Silver </span></a>
    </td>
    <td width="138" align="center" valign="middle" style="border-right:1px solid #CCCCCC; border-bottom:1px solid #CCCCCC; background-image:
            url(images/medalbronze1.png); background-position:center; background-repeat:no-repeat">
            <a href="delete" ><span class="style1 style2">Bronze </span></a>
    </td>

    </div>

    <td colspan="2" align="center" valign="middle" style="background-image:url(images/availabilityBg1.png);  background-position:center; background-repeat:no-repeat    
        ; color:#FFFFFF; border-bottom:1px solid #CCCCCC ">
        <a id="<?php echo $row['queryID'];  ?>" class="customLnk" href="#"> 
            Ask Follow Up Question            </a>        </td>

因此在点击Ask Follow Up Question后，用户应该在该链接下方弹出一个弹出窗口。

我怎样才能做到这一点？由于每个回复都是动态的，我不知道如何将ID分配给特定链接并显示附加到该链接的表单。我没有声誉，因此我无法上传图片，因此很难解释。

Answer 1

点击活动，您只需将div display:none设置为display:block

document.getElementById("myclickableElement").addEventListener("click",function(){
   document.getElementById("BoxToShowID").style.display="block";
},false);

您可以使用此简单示例根据任何事件触发器遍历要显示/隐藏的多个元素。

在链接到该页面的JavaScript文件中，您可以将此代码段添加到该文件中。使用您要接收click事件的元素的ID更改myclickableElement。将BoxToShowID更改为您希望在单击事件发生时做出反应的元素的ID。您将看到.style.display="block";部分，您可以更改此部分以更改任何CSS样式。

document.getElementById("myclickableElement")//this gets the element by its ID
element.addEventListener(eventType,functionToCall,TraversEventUpTree)//this adds the event to the element.
element.style.display="block";//set style display of element to block.

不要在你的HTML中添加任何onclick动作。你不会改变你的html文件中的任何内容。

需要在点击链接时显示隐藏div

1 个答案: