php - 使用加载程序显示/隐藏 php mysql 结果

Question

我有 MySQL 数据库结果。

我想显示 3 行，然后隐藏其余部分。

当用户点击加载更多数据然后显示所有行。

问题是当我点击显示更多时，只会再显示一行。

<?php
$query_brands = mysql_query("SELECT distinct pd_filter1 from tbl_brands2 WHERE pd_code in (select pd_code from tbl_product where cat_id='2')") or die(mysql_error());
$count_brands  = mysql_num_rows($query_brands);
  if($count_brands > 0) {
  while($fetch_brands = mysql_fetch_array($query_brands)) {
    $record_brands[] = $fetch_brands;
  }
  }

$i_brands=0;
foreach($record_brands as $records_brands) {                                
?>
<table border="1" width="215" style="border-collapse: collapse;  border-spacing: 0;" bgcolor="#eeeff0">
  <tr>
    <td>
<?php
      $i_brands = $i_brands + 1;
      if ($i_brands > 3)
        {
?>
        <div id="myDIV_Filter1_1" style="display:none";>
<?php
        }
      }
?>
    <div id="myDIV_Filter1_2">
      <span class="class22">
        <a href="#" onclick="myFunction();return false;">show more...</a>
      </span>
    </div>  

    <div id="myDIV_Filter1_3" style="display:none";>
      <span class="class22">
        <a href="#" onclick="myFunction();return false;">show less...</a>
      </span>
    </div>  

    </td>
  </tr>
</table>

JavaScript

function myFunction() {
    var x_filter1_1 = document.getElementById("myDIV_Filter1_1");
    var x_filter1_2 = document.getElementById("myDIV_Filter1_2");
    var x_filter1_3 = document.getElementById("myDIV_Filter1_3");
    if (x_filter1_1.style.display === "none") {
        x_filter1_1.style.display = "block";
        x_filter1_2.style.display = "none";
        x_filter1_3.style.display = "block";
    } else {
        x_filter1_1.style.display = "none";
        x_filter1_2.style.display = "block";
        x_filter1_3.style.display = "none";
    }
}

Answer 1

您的代码有一些错误:

1) 尽量不要像下面这样在代码行中使用return:

<a href="#" onclick="myFunction();return false;">show more...</a>

您可以像解释的那样更好地使用它 here

2) 您在不显示 中拥有代码示例的所有div，用户永远不会看到这些div 中的信息，因为您没有任何代码来开始显示其中的一些。在同一行你放了一个“;”在样式之后，但它必须在样式内部。这行有错误:

<div id="myDIV_Filter1_3" style="display:none";>

一定是这样的:

<div id="myDIV_Filter1_3" style="display:none;">

javascript 函数 myFunction 上的“显示隐藏”逻辑有错误，因为您的 div id="myDIV_Filter1_1" 包含代码中的其他 2 个 div例如，您不能隐藏这个特定的 div，因为您将失去其他 2 个 div 的“显示”或“隐藏”。这样它就永远不会向您显示您想要查看的其他 3 行。我修复了所有错误，您可以在此处查看我的代码片段中的代码:

function myFunction() {
    var x_filter1_1 = document.getElementById("myDIV_Filter1_1");
    var x_filter1_2 = document.getElementById("myDIV_Filter1_2");
    var x_filter1_3 = document.getElementById("myDIV_Filter1_3");
    if (x_filter1_3.style.display === "none") {
        x_filter1_1.style.display = "block";
        x_filter1_2.style.display = "none";
        x_filter1_3.style.display = "block";
    } else {
        x_filter1_1.style.display = "block";
        x_filter1_2.style.display = "block";
        x_filter1_3.style.display = "none";
    }
}

<?php
$query_brands = mysql_query("SELECT distinct pd_filter1 from tbl_brands2 WHERE pd_code in (select pd_code from tbl_product where cat_id='2')") or die(mysql_error());
$count_brands  = mysql_num_rows($query_brands);
  if($count_brands > 0) {
  while($fetch_brands = mysql_fetch_array($query_brands)) {
    $record_brands[] = $fetch_brands;
  }
  }

$i_brands=0;
foreach($record_brands as $records_brands) {                                
?>
<table border="1" width="215" style="border-collapse: collapse;  border-spacing: 0;" bgcolor="#eeeff0">
  <tr>
    <td>
<?php
      $i_brands = $i_brands + 1;
      if ($i_brands > 3)
        {
?>
        <div id="myDIV_Filter1_1">
<?php
        }
      }
?>

    <div id="myDIV_Filter1_2" >
      <span class="class22">
        <a href="#" onclick="myFunction();">show more...</a>
      </span>
    </div>  

    <div id="myDIV_Filter1_3" style="display:none">
      <span class="class22">
        <a href="#" onclick="myFunction();">show less...</a>
      </span>
    </div>  

    </td>
  </tr>
</table>

希望对您有所帮助!