У меня есть результаты базы данных 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";
}
}
У вас есть некоторые ошибки в вашем коде:
1) Старайтесь не использовать возврат так, как вы сейчас используете в строках кода, подобных этому:
<a href="#" onclick="myFunction();return false;">show more...</a>
Вы можете использовать его лучше, как описано здесь.
2) У вас есть все ваши divs примера кода на дисплее none, пользователь никогда не увидит информацию в этих divs, потому что у вас нет кода, чтобы начать показывать некоторые из них. В той же строке вы помещаете ";" после стиля, но он должен быть внутри стиля. Эта строка имеет ошибку:
<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>
Надеюсь, поможет!