Javascript блюз в PHP: getElementById & amp; getElementsByClassName
Это должно быть достаточно просто, увы, это вызывает у меня проблемы:
У меня есть страница PHP, которая дает мне до трех разных итераций td содержание. Первый показан с display: table-cell, а остальные скрыты с display: none,
echo '<td style="display: table-cell" class="gameLineCell" id="'.$playerLine.'" colspan="3">';
&
echo '<td style="display: none" class="gameLineCell" id="'.$playerLine.'" colspan="3">';
У меня тогда есть ссылка, соответствующая каждому td опция — щелчок по ней должен запускать функцию loadLine в котором я передаю строку, которая соответствует td Я БЫ. Идентификационные строки сродни EV-F1 — пять символов, число, дефис.
echo "<a onclick='loadLine(".$playerLine.")' href='javascript:void(0)'>".$playerLine."</a>";
Скрипт скрывает все tdс класса gameLineCellи отображает тот, чья ссылка была нажата.
<script>
function loadLine(line) {
var lines = document.getElementsByClassName('gameLineCell');
for (var i = 0; i < lines.length; i++) {
lines[i].style.display = 'none';
}
document.getElementById(line).style.display = 'table-cell';
}
</script>
Когда я просматриваю источник моей страницы PHP, все отображается правильно — мои ссылки показывают правильные строки в loadLine скобки, каждый из моих tds присутствует, первый показ, а остальные скрыты — однако мои ссылки не работают. Я пытался удалить getElementsByClassName последовательность, запускающая только getElementByIdПравда, безрезультатно. Ничего не произошло.
Есть идеи?
Сильно обязан любой помощи,
Эндрю
РЕДАКТИРОВАТЬ: Источник ошибки? Javascript перерезает мои строки! EV-F1 становится EV. Смотря в почему и как исправить сейчас.
Решение
Здесь есть несколько проблем, связанных с правильным экранированием и вложением строк; Я лично пользуюсь printf() чтобы напечатать HTML, это будет выглядеть так:
printf('<td style="display: table-cell" class="gameLineCell" id="%s" colspan="3">',
htmlspecialchars($playerLine, ENT_QUOTES, 'UTF-8');
);
Этот фрагмент кода особенно сложен:
echo "<a onclick='loadLine(".$playerLine.")' href='javascript:void(0)'>".$playerLine."</a>";
Проблема в том, что $playerLine не содержит строковых вложений JavaScript, поэтому он попытается решить EV-F1 в EV - F1 (то есть вычитание EV а также F1). Чтобы это исправить, вам нужно закодировать переменную с помощью JSON, а затем применить экранирование HTML:
printf('<a onclick="loadLine(%s)" href="javascript:void(0)">%s</a>',
htmlspecialchars(json_encode($playerLine), ENT_QUOTES, 'UTF-8'),
htmlspecialchars($playerLine), ENT_QUOTES, 'UTF-8')
);
Другие решения
У вас есть опечатка в коде, который вы показываете. Есть дополнительный ) Вот
for (var i = 0; i < lines.length); i++)
так должно быть
for (var i = 0; i < lines.length; i++)