0
140
VistasAlternar problemas. Algunas matrices no se alternan
¿Por qué la matriz 2 no se alterna?
"-" alternado, "+" no alternado
codigo php:
$html = ''; $array = array('1' => 'Airport', '2' => 'Restaurant', '3' => 'Market'); foreach ($array as $key => $name) { $x = $key; $html .= '<table class="pad-3"><tr>'; $html .= '<td><a href=\'javascript:toggle("' . $x . '");\'> <img id="' . $x . '_img_1" src="../img/expandable_1.gif" width="9" height="9"/> <img id="' . $x . '_img_2" src="../img/expandable_2.gif" width="9" height="9" style="display:none"/> ' . $name . '</a> </td>'; $html .= '</tr></table>'; $html .= '<div id="' . $x . '_div_1" style="margin-left:15px;display:none;">'; $html .= '</div>'; } echo $html;JavaScript:
function toggle(type) { var a = $('#' + type + '_div_1'); var b = $('#' + type + '_img_1'); var c = $('#' + type + '_img_2'); if (a.is(':visible')) { a.hide(); b.show(); c.hide(); } else { a.show(); b.hide(); c.show(); }}
Corrección temporal: Traté de cambiar el índice de matriz de mi Restaurante a 3. ejemplo: "$array = array('1' => 'Aeropuerto', '3' => 'Restaurante', '4' => 'Mercado'); "
De alguna manera, cuando asigno un índice como 2, no cambia. Tengo problemas cuando configuro el índice en 2
Información adicional: cuando agrego una línea de alerta en js. Cuando hago clic en el restaurante, la alerta aparecerá, pero aún no cambiará
·
Juan Pablo Isaza
1 Respuestas
Responde la pregunta0
REALMENTE necesitas delegar
He simplificado todo: me he deshecho de la tabla innecesaria y de las imágenes.
window.addEventListener("load",function() { document.getElementById("container").addEventListener("click",function(e) { const tgt = e.target.closest("a"); if (tgt && tgt.classList.contains("toggle")) { e.preventDefault(); // stop link let isHidden = tgt.nextElementSibling.hidden; tgt.nextElementSibling.hidden = !isHidden; tgt.querySelector("span.exp").classList.toggle("plus",!isHidden) tgt.querySelector("span.exp").classList.toggle("minus",isHidden) } }) }) .content { margin-left: 15px; } .pad-3 { padding: 3px } a.toggle { text-decoration: none } .exp { font-size: 12px; padding-right: 10px; } .exp.plus::after { content: "⊞" } .exp.minus::after { content: "⊟" } <div id="container"> <a href="#" class="pad-3 toggle"><span class="exp plus"></span>Airport</a> <div class="content" hidden>Airport</div><br/> <a href="#" class="pad-3 toggle"><span class="exp plus"></span>Restaurant</a> <div class="content" hidden>Restaurant</div><br/> <a href="#" class="pad-3 toggle"><span class="exp plus"></span>Market</a> <div class="content" hidden>Market</div><br/> </div>PHP
<div id="container"> <?php $array = array('1' => 'Airport', '2' => 'Restaurant', '3' => 'Market'); foreach ($array as $key => $name) { ?> <a href="#" class="pad-3 toggle"><span class="exp plus"></span><?= $name ?></a> <div class="content" hidden> <?= $name ?> </div><br/> <? } ?> </div>
·
Juan Pablo Isaza
Denunciar
Responde la pregunta