我如何才能使数组中的按钮只对其作出响应'使用javascript的自己的包装器
How can I make a button inside an array respond to only it's own wrapper using javascript?
希望有人能帮我解决这个问题，如果我没有正确描述这个问题，请原谅我。英语不是我的第一语言。
我的代码脚本使用数组函数从数据库中加载所有内容。我创建了一个包装器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文件
这提高了标记的可读性（因为它没有杂乱的样式），并且更易于维护。
相关文章：
- 如何使用Spring MVC将Facebook返回的响应数据保存在Java类中
- 使用angularjs向浏览器发送servlet响应(下载功能）
- 不再使用innerHTML进行AJAX响应.(代码未得到响应）
- 为什么可以't我使用了AJAX响应的一部分
- Typescript angularjs$http获取响应类型(避免使用<any>）
- 如何使用jQueryAjax后响应参数
- http请求使用html而不是json进行响应
- 如何使用httpwebrequest在c#中获得网页(使用ajax/javascript的php）的最终响应
- 使用来自不同异步函数的响应创建一个json对象
- 如何使用更新图像源以响应新闻事件
- 对json响应使用jquery数据表
- Jquery Ajax 401响应使用Twitter API
- 美化JSON响应使用ajax jQuery编程
- 为AJAX响应使用HTML5自定义数据属性
- Javascript无法响应.使用ajax ASP.Net重定向
- Rails默认为"text/javascript"响应使用form_for构建的非显眼JavaScr
- 如何在浏览器上加载html响应使用ajax调用
- 在forEach迭代数组后发送响应(使用回调?)
- Ajax 响应使用 find 查找 HTML 片段
- PHP Ajax响应使用jQuery为空
