搜索框无法切换列表[重复]

Question

在下面的排行榜中：如果我点击每周记分卡，则会显示每周得分，如果点击总体记分卡，则会显示总体得分。

问题： 当页面加载时显示每周记分卡。

现在搜索框非常适合每周记分卡，当我切换并转到整体记分卡时，搜索框不起作用。请让我知道错误到底在哪里。

涉及的代码： 对于搜索框：

<div id="search5back">

		<form method="get" action="/search" id="searchbox5">
		<input id="search52" name="q" type="text" size="40" onkeyup="myFunction()" placeholder="Search an Employee ...." />
    </form>
</div>

每周记分卡涉及 PHP：

	<div id="weeklylb" class="leadboardcontent">

			<div class="leaderboard" id="leaderboard">
			<ol id = "myOL">
			<li>
			<mark>
		<?php  while( $toprow4 = sqlsrv_fetch_array( $stmt4) ) {

		echo  "<div class='parent-div'><span class='rank'>" . $toprow4['rank'] . "</span><span class='name'>" . $toprow4['EmployeeName'] . "</span><span class='points'>" . $toprow4['pointsRewarded'] . "</span></div>";

		} ?>
		 </mark>
		 </li>
		 </ol>
		 </div>

     </div>

整体记分卡涉及 PHP：

<div id="overalllb" class="leadboardcontent" style="display:none">

  <div class="leaderboard" id="leaderboard">
  <ol id = "myOL">
  <li>
  <mark>
  <?php  while( $toprow2 = sqlsrv_fetch_array( $stmt3) ) {

  echo  "<div class='parent-div'><span class='rank'>" . $toprow2['overallRank'] . "</span><span class='name'>" . $toprow2['EmployeeName'] . "</span><span class='points'>" . $toprow2['Total_points_Rewarded'] . "</span></div>";

  } ?>
  </mark>
  </li>
  </ol>
  </div>

</div>

涉及的javascript（用于搜索框）：

<script type="text/javascript">
function myFunction() {
  var input, filter, ol, li, a, i;
  input = document.getElementById("search52");
  filter = input.value.toUpperCase();
  ol = document.getElementById("myOL");
  li = ol.getElementsByTagName("li");
  divs=li[0].getElementsByClassName("parent-div");
  for (i = 0; i < divs.length; i++) {
      a = divs[i].getElementsByClassName("name")[0];
      if (a.innerHTML.toUpperCase().indexOf(filter) > -1) {
          divs[i].style.display = "";
      } else {
          divs[i].style.display = "none";
      }
  }
}

</script>

Answer 1

function myFunction() {
    var input, filter, ol, li, a, i;
    input = document.getElementById("search52");
    filter = input.value.toUpperCase();

    var leadboardcontent_all = document.getElementsByClassName('leadboardcontent');
    for(var i = 0; i < leadboardcontent_all.length; i++) {
        if(leadboardcontent_all[i].style.display !== 'none') {
            leadboardcontent_visible = leadboardcontent_all[i];
        }
    }

    ol = leadboardcontent_visible.getElementsByClassName("myOL")[0];
    li = ol.getElementsByTagName("li");
    divs = li[0].getElementsByClassName("parent-div");

    for (i = 0; i < divs.length; i++) {
        a = divs[i].getElementsByClassName("name")[0];
        if (a.innerHTML.toUpperCase().indexOf(filter) > -1) {
            divs[i].style.display = "";
        } else {
            divs[i].style.display = "none";
        }
    }
}

在输入字段中键入时需要检查一个条件。也就是说，您需要检查这些选项卡中的任何一个是否可见。如果两者之一可见，请在该选项卡上执行筛选操作。在这里，我用leadboardcontent 的类制作了一个div 数组，并循环遍历它们以检查其中哪些是可见的，并将可见的添加到一个新变量中。现在，只需替换

即可遍历 leadboardcontent 元素中的后代元素

ol = document.getElementById("myOL");

与

ol = leadboardcontent_visible.getElementsClassName("myOL")[0];

因为你只是遍历可见的。请注意，在您的情况下，不要将ID 用于ol 标签。相反，请使用class，因为您有多个ol 标记并且也用于相同目的。

希望对你有帮助！