希望有人可以帮我解决这个问题，如果我没有正确描述这个问题，请原谅我。英语不是我的第一语言。
我的代码脚本使用数组函数从我的数据库加载所有内容。我创建了一个包装器DIV，它根据结果的数量包含最多5个内部div。如果脚本从数据库中加载4个结果，则会创建4个内部div。如果脚本从数据库中加载了17个结果，则会创建17个内部div，等等。
每个页面包含5个内部div。每当前一个wrapper-div被完全填充时，它会自动创建一个新的wrapper-div（如果结果= 17，那么我有4个包装器div。）。
现在，每个包装器都包含多个功能，如关闭按钮，打印按钮等。我已经创建了这个代码，只要只有1个包装器，它就能正常工作。但是只要有多个包装器，就没有任何作用。
我知道问题是因为ID必须是唯一的。但是如何调整此代码以便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>
答案 0 :(得分：1)
我知道这不是一个完整的答案，但你的PHP / HTML太乱了;并且有很多，为你清理它。
如果您将枚举的id转换为css-classes，那么您的代码可能看起来很糟糕。像这样：
你已经使用jQuery进行转换，为什么不利用它的全部功能。
[u]int_fastN_t同时管理所有包装器。
免责声明：此JS-snippet不适用于您当前的标记，因为它依赖于类而不是枚举的id。
然后，此代码基于您的JS代码，以及>后转换ID的html 的估计结构。
因此，在您修复标记后可能需要进行一些调整。
<强> TODO：
虽然最后两个没有必要，但这将是一个更干净的方法。
样式属于CSS文件
这提高了Markup的可读性（因为它没有样式混乱），并且更容易维护。