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标记，并且也是出于同一目的。

希望它有所帮助！

搜索框无法切换列表

1 个答案: