Question

我有一个页面需要根据提交按钮显示或隐藏行。页面加载时，我不想显示年份。仅当单击提交按钮时，年份才应显示。但是使用下面的代码，只有第一行隐藏在页面加载中。如何隐藏页面加载中的所有行？

function showDiv() {
            var v = document.getElementById('search').value;
            document.getElementById('search').innerText = v;
            if (v) {
                document.getElementById("searchresult").style.visibility = "visible";

                document.getElementById("hide").style.visibility = "hidden";
            }
            else {
                document.getElementById("searchresult").style.visibility = "hidden";

                document.getElementById("hide").style.visibility = "visible";
            }
        }

    
    
   <button type="submit" name="Submit" onclick="showDiv()">Submit</button> 
   
  <div id="searchresult">
            <strong>You searched "<span id="search"></span>"</strong>
        </div> 
   
    @foreach (var groupMonth in Model.Records.GroupBy(recordLists => new { Lists.date.Value.Year, Lists.date.Value.Month }))
                    {
                        <tr >
                            <td colspan="4" style="font-weight:bold">
                                <div class="Header">
                                    <span id="hide" style="color: aqua;">@groupMonth.Key.Year</span> 
                                    
                                </div>
                            </td>
                        </tr>
      }

Answer 1

由于foreach，您将输出包含<span id="hide"的多行。您不能有多个具有相同ID的元素。当您尝试通过ID进行选择时，代码应该如何得知您在谈论哪个代码？它不能，因此只选择每次找到的第一个。所有其他均被视为无效。毕竟，根据定义，ID必须是唯一的。

使用id="hide"代替class="hide"。然后，您可以选择该类中的所有元素，并将其全部隐藏。

如何基于提交按钮在foreach循环中显示/隐藏行

1 个答案: