希望有人能帮我解决这个问题,如果我没有正确描述这个问题,请原谅我。英语不是我的第一语言。
我的代码脚本使用数组函数从数据库中加载所有内容。我创建了一个包装器DIV,根据结果的数量,它最多包含5个内部DIV。如果脚本从数据库中加载4个结果,则会创建4个内部div。如果脚本从数据库中加载17个结果,则会创建17个内部div,等等
每页包含5个内部div。每当上一个包装器div被完全填充时,它就会自动创建一个新的包装器div(因此,如果结果=17,我就有4个包装器divs,即)
现在,每个包装器都包含多个函数,如关闭按钮、打印按钮等。我已经创建了这段代码,只要只有1个包装器,它就可以正常工作。但是,只要有多个包装器div,就什么都不起作用。
我知道问题是因为身份证必须是唯一的。但是,我如何调整这些代码以使javascript开始工作呢?例如,如果我单击包装器2的关闭按钮,那么只有包装器2会关闭,而不是所有的包装器都会关闭?
到目前为止我拥有的代码
var wrapper_programmaker = document.getElementsByClassName('wrapper_programmaker');
for (var g = 1; g < wrapper_programmaker.length; g++) {
var expanded[g] = true;
document.getElementById("kolom_trigger"+[g]).onclick = function() {
if (!expanded[g])
{
expanded[g] = true;
$("#kolomInstellen"+[g]).hide(1000);
}
else
{
expanded[g] = false;
$("#kolomInstellen"+[g]).show(1000);
};
};
document.getElementById("kolom1_trigger"+[g]).onclick = function() {
document.getElementById('kolom1'+[g]).style.width = 'auto';
$("#kolom2"+[g]).hide();
};
document.getElementById("kolom2_trigger"+[g]).onclick = function() {
document.getElementById('kolom1'+[g]).style.width = '41%';
$("#kolom2"+[g]).show();
};
document.getElementById("closeBTN"+[g]).onclick = function() {
if (!expanded[g])
{
expanded[g] = true;
$("#kolomInstellen"+[g]).hide(1000);
}
else
{
expanded[g] = false;
$("#kolomInstellen"+[g]).show(1000);
};
};
}
这是PHP:
<? $sql_actCount = mysqli_query($mysqli, "SELECT DISTINCT datum FROM activiteiten WHERE programmaID=$programmaID");
$rowcount_actCount=mysqli_num_rows($sql_actCount);
$page_rows = 5;
$last = ceil($rowcount_actCount/$page_rows);
for ($x = 1; $x <= $last; $x++) {
$max = 'limit ' .($pagenum - 1) * $page_rows .',' .$page_rows;
if ($pagenum < 1)
{
$pagenum = 1;
}
elseif ($pagenum > $last)
{
$pagenum = $last;
}
$pagenum++;
?>
<div class="wrapper_programmaker">
<div class="main_programmaker" style="background-image:url(../images/programmaBG_<? echo $taal; ?>_<? echo $seizoen; ?>.jpg); background-repeat:no-repeat; background-size:contain;">
<div class="programmaker_content_activiteiten">
<? $sql_data = mysqli_query($mysqli, "SELECT * FROM activiteiten WHERE programmaID=$programmaID GROUP BY datum ORDER BY datum ASC $max");
while($rows_data=mysqli_fetch_array($sql_data,MYSQLI_ASSOC)){
$nlDatum = $rows_data['datum'];
if ($taal == 'NL') {
setlocale(LC_ALL, 'nl_NL.UTF8');
$convertDatum = (strftime('%e %B %Y',strtotime($nlDatum)));
}
if ($taal == 'DE') {
setlocale(LC_ALL, 'de_DE.UTF8');
$convertDatum = (strftime('%e. %B %Y',strtotime($nlDatum)));
}
if ($taal == 'EN') {
setlocale(LC_ALL, 'en_EN.UTF8');
$convertDatum = (strftime('%B %e, %Y',strtotime($nlDatum)));
}
if ($taal == 'FR') {
setlocale(LC_ALL, 'fr_FR.UTF8');
$convertDatum = (strftime('%e %B %Y',strtotime($nlDatum)));
}
?>
<div class="programmaker_content_kolom">
<font class="programmaker_content_datum">
<? echo $convertDatum ?>
</font>
<br>
<? $single_datum = $rows_data['datum'];
$sql_single_act = mysqli_query($mysqli, "SELECT * FROM activiteiten WHERE programmaID=$programmaID AND datum='$single_datum' ORDER BY van ASC");
while($rows_single_act=mysqli_fetch_array($sql_single_act,MYSQLI_ASSOC)){
$activiteitID = $rows_single_act['id'];
$activiteitTitel = $rows_single_act['titel'];
?>
<a href="#" class="noline">
<div class="programmaker_content_blok">
<font class="programmaker_content_titel">
<? $sql_vertaal_titel = mysqli_query($mysqli, "SELECT * FROM vertalingen WHERE NL='$activiteitTitel'");
$result_vertaal_titel = mysqli_fetch_assoc($sql_vertaal_titel);
echo $result_vertaal_titel[$taal]; ?>
</font>
<br>
<font class="programmaker_content_tijd">
<? echo $rows_single_act['van']; ?> - <? echo $rows_single_act['tot']; ?>
</font>
<br>
<font class="programmaker_content_trefpunt">
<? $origNL = $rows_single_act['verzamelpunt'];
$sql_trefpunt = mysqli_query($mysqli, "SELECT * FROM verzamelpunten WHERE NL='$origNL'");
$result_trefpunt = mysqli_fetch_assoc($sql_trefpunt);
if ($result_trefpunt[$taal] != '') {
echo $result_trefpunt[$taal];
} else {
echo ' ';
}?>
</font>
</div>
</a>
<div style="position:relative; width:100%; right: 10%; bottom: 35px;">
<table width="100%">
<tr>
<td width="50%">
</td>
<td width="16%">
<? $bedragenID = $rows_single_act['bedragenID'];
$sql_bol_bedrag = mysqli_query($mysqli, "SELECT * FROM programmabol_bedragen WHERE id=$bedragenID");
$result_bol_bedrag = mysqli_fetch_assoc($sql_bol_bedrag);
?>
<img src="../images/<? echo $result_bol_bedrag['url']; ?>.png" width="100%">
</td>
<td width="16%">
<? $leeftijdenID = $rows_single_act['leeftijdenID'];
$sql_bol_leeftijden = mysqli_query($mysqli, "SELECT * FROM programmabol_leeftijden WHERE id=$leeftijdenID");
$result_bol_leeftijden = mysqli_fetch_assoc($sql_bol_leeftijden);
?>
<img src="../images/<? echo $result_bol_leeftijden['url']; ?>.png" width="100%">
</td>
<td width="16%">
<? $themasID = $rows_single_act['themasID'];
$sql_bol_themas = mysqli_query($mysqli, "SELECT * FROM programmabol_themas WHERE id=$themasID");
$result_bol_themas = mysqli_fetch_assoc($sql_bol_themas);
?>
<img src="../images/<? echo $result_bol_themas['url']; ?>.png" width="100%">
</td>
</tr>
</table>
</div>
<? } ?>
</div>
<? } ?>
</div>
</div>
<div class="kolomWrapper">
<div id="kolom1" data-id="<? echo $x; ?>">
<font class="programmaker_content_trefpunt">
1 kolom - 1 kolom - 1 kolom - 1 kolom - 1 kolom - 1 kolom - 1 kolom - 1 kolom - 1 kolom - 1 kolom - 1 kolom - 1 kolom - 1 kolom - 1 kolom - 1 kolom -
</font>
</div>
<div id="kolom2" data-id="<? echo $x; ?>">
<font class="programmaker_content_trefpunt">
2 kolom - 2 kolom - 2 kolom - 2 kolom - 2 kolom - 2 kolom - 2 kolom - 2 kolom - 2 kolom - 2 kolom -
<font class="programmaker_content_trefpunt">
</div>
</div>
<div class="kolomPick" align="center" data-id="<? echo $x; ?>">
<font class="kolomtitel">
Kolommen
</font>
<br>
<table width="100%">
<tr>
<td width="50%">
<div style="width:100%">
<img class="kolom1_trigger" src="../images/Kolom_1.png" width="100%" data-id="<? echo $x; ?>">
</div>
</td>
<td width="50%">
<div style="width:100%">
<img class="kolom2_trigger" src="../images/Kolom_2.png" width="100%" data-id="<? echo $x; ?>">
</div>
</td>
</tr>
</table>
<img src="../images/close_<? echo $kleur; ?>.png" width="15px" style="position:absolute; top:5px; right:5px" class="closeBTN">
</div>
<img src="../images/Kolom_trigger.png" style="width:2%; z-index:997; position:absolute; top: 51.5%; left:29.3%;" id="kolom_trigger" data-id="<? echo $x; ?>">
</div>
<? } ?>
</div>
我知道这不是一个完整的答案,但你的PHP/HTML太乱了;还有很多,为你清理。
如果你把枚举的id变成css类,你的代码可能看起来像这样:
您已经使用jQuery进行转换了,为什么不充分利用它呢。
var $wrapper_programmaker = $('.wrapper_programmaker')
.on('click', '.kolom_trigger, .closeBTN', function(e){
//these two buttons seem to execute the same code/logic,
//just at the opposite ends of the state/animation
$('.kolomInstellen', e.delegateTarget).toggle(1000);
})
.on('click', '.kolom1_trigger', function(e){
$('.kolom1', e.delegateTarget).width('auto');
$('.kolom2', e.delegateTarget).hide();
})
.on('click', '.kolom2_trigger', function(e){
$('.kolom1', e.delegateTarget).width('41%');
$('.kolom2', e.delegateTarget).show();
});
//close every .kolomInstellen except of the first
$wrapper_programmaker.not(':first').find('.kolomInstellen').hide();
同时管理所有包装器。
免责声明:这个JS片段不适用于您当前的标记,因为它依赖于类而不是枚举的id
然后,此代码基于您的JS代码,以及转换id后html的估计结构
因此,在修复标记后,它可能需要一些调整。
TODO:
- 将枚举的id转换为(非枚举的)css类
- 您应该修复php文件中的缩进,使其他人更容易阅读/理解它
- 然后,plz删除内联样式,并将它们放入css文件中
- 您应该将按钮(wich当前为图像)转换为div,并将图标设置为背景图像
尽管后两种方法没有必要,但这将是一种更干净的方法
样式属于CSS文件
这提高了标记的可读性(因为它没有杂乱的样式),并且更易于维护。