[英]How can I make a button inside an array respond to only it's own wrapper using javascript?
希望有人可以幫助我解決這個問題，如果我對問題的描述不正確，請原諒。 英語不是我的母語。
我的代碼腳本使用array函數從數據庫中加載所有內容。 我已經創建了一個包裝器DIV，根據結果數，該包裝器最多包含5個內部div。 如果腳本從數據庫中加載了4個結果，則會創建4個內部div。 如果腳本從數據庫中加載了17個結果，則將創建17個內部div等。
每頁包含5個內部div。 每當前一個wrapper-div完全填滿時，它會自動創建一個新的wrapper-div（因此，如果結果= 17，即我有4個wrapper-div）。
現在，每個包裝器都包含多個功能，例如關閉按鈕，打印按鈕等。我創建了這段代碼，只要只有1個包裝器div，它就可以正常工作。 但是，一旦有一個以上的wrapper-div，則沒有任何效果。
我知道問題是因為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>
我知道這不是一個完整的答案，但是您的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的估計結構。
因此，在修復標記后，可能需要進行一些調整。
去做：
盡管最后兩個不是必需的，但這將是一種更干凈的方法。
樣式屬於CSS文件。
這提高了標記的可讀性（因為它不會被樣式弄得很亂），並且易於維護。
如何使因變量在HTML / javascript中響應和更新？
[英]How can I make dependent variables respond and update in HTML/javascript?
僅當用戶使用javascript使用IE瀏覽時，如何才能隱藏按鈕？
[英]How can I make a button hidden only when the user is browsing with IE using javascript
如何處理此JSON數組，以刪除數組的每個元素中的包裝器對象？ 使用JavaScript
[英]How can I process this JSON array to remove a wrapper object in each element of the array? using JavaScript
如何獲取Web圖形的javascript標記內的數據，以便創建自己的圖形？
[英]How can I get the data inside a javascript tag for a web graph, so I can make my own graph?
如何讓 Django 代碼中的 Javascript 監聽和響應前端的點擊事件？
[英]How do I make Javascript inside Django code listen & respond to on click events on the front end?
如何使同樣使用列表項創建的按鈕起作用？ 我希望它刪除數組的當前項。 每個項目都有自己的按鈕
[英]How do i make the button that's also created with the list item work? I want it to delete the current item of the array. Each item has it own button
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.