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

问题描述

我在我的项目中创建了一个工作数据列表。我试图通过显示更多信息按钮的选项只显示一些细节。我试过这样做，但无论用户点击哪个数据列表块，它总是打开第一个块的信息。（而不是在他点击的同一个块中打开） 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;
}

解决方法

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

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

<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";
}