数据列表更多详细信息选项的问题

Posted 2023-03-06

【中文标题】数据列表更多详细信息选项的问题

【英文标题】：issue with datalist more details option

【发布时间】：2021-07-04 21:12:10

【问题描述】：

我在我的项目中创建了一个工作数据列表。我正在尝试使用显示更多信息按钮选项来显示一些详细信息。我试过这样做，但无论用户点击哪个数据列表块，它总是会打开第一个块的信息。（而不是在他点击的同一个块中打开） Before clicking After clicking

aspx

         <asp:DataList ID="DataList1" runat="server">
        <ItemTemplate>
           <div class="jobContainer">
              <div class="jobDetails">
                 <span class="jobName"><%# Eval("jobName") %></span><br /> 
                 <hr class="style13">
                 <a class="Details">    <b>Requirments: </b><span ><%# Eval("jobRequirments") %> WPM</span>   </a> 
                 <a class="Details">  <b>Salary: </b><span ><%# Eval("jobSalary")%> Shekel per hour</span>  </a>
                 <a class="Details">   <b>City: </b><span ><%# Eval("jobCity")%></span> <br />  </a>
                 <button id="moreDetailsButton" class="moreDetails" onclick="showDetails()" type="button">More Details</button>
                 <div id="secondDetails">
                    <a class="Details">           <b>Address: </b><span ><%# Eval("jobAddress")%></span>  </a>
                    <a class="Details">          <b>Description: </b><span ><%# Eval("jobDescription")%></span> <br />  </a>
                    <a class="Details">       <b>Contact: </b><span ><%# Eval("jobContact")%></span>  </a>
                    <a class="Details">         <b>Type: </b><span ><%# Eval("jobType")%></span> <br />  </a>
                    <asp:Button ID="Button1" class="moreDetails" runat="server" OnClick="Button1_Click" Text="Send nomination"/>
                 </div>
              </div>
           </div>
        </ItemTemplate>
     </asp:DataList>
     <script src="js/jobs.js" type="text/javascript"></script>

js

function showDetails() 
document.getElementById("moreDetailsButton").style.display = "none";
document.getElementById("secondDetails").style.display = "block";

css

.jobDetails 

margin-right: 4vw;
font-size: 20px;
margin-bottom: 1.25vh;



.jobName 
    font-size: 35px;
    font-weight: bold;
    margin-bottom: 3vh;


.jobContainer 
    border: solid 4px #c7aa8b;
    margin-left: 30px;
    padding: 3vh;
    margin-top: 2vh;




hr.style13 
    height: 8px;
    border: 0;
    box-shadow: 0 15px 15px -17px #97611D inset;
    margin-bottom: 2vh;


.moreDetails 
    width: 190px;
    background: #c7aa8b;
    font-weight: bold;
    font-size: 20px;
    color: white;
    border: 0 none;
    border-radius: 2px;
    cursor: pointer;
    padding: 15px 5px;
    transition: none;


    .moreDetails:hover 
        box-shadow: 0 0 0 2px white, 0 0 0 3px #c7aa8b !important;
        transition: none;
    

#secondDetails
    display: none;

.Details
    margin-left: 25px;

#moreDetailsButton 
    position: relative;
    margin-top: 3vh;
    margin-left: 40vw;

【参考方案1】：

您的DataList 以多个moreDetailsButton 结尾，因此id 不会用作选择器。所以你可以做的就是给id 赋予唯一的价值并将其用作选择器。

假设JobName 对于每一行都是唯一的，那么您可以通过添加JobName 来创建id 以使其唯一，如下所示：

<button id='<%# "moreDetailsButton_" + EVAL("JobName") %>' class="moreDetails" onclick='<%# "showDetails(" +Eval("JobName") + " );" %>' type="button">More Details</button>
<div id='<%# "secondDetails_" + EVAL("JobName") %>'>
//..

您的脚本将是：

function showDetails(jobName) 
    document.getElementById("moreDetailsButton_" + jobName).style.display = "none";
    document.getElementById("secondDetails_" + jobName).style.display = "block";