Перенос идентификаторов элементов из PHP в JavaScript
Я сделал небольшой скрипт, чтобы при нажатии на кнопку можно было показать или скрыть описание.
$('.package-1-show').click(function () {
$('.js-package-1').css('display', 'block');
$('.package-1-show').css('display', 'none');
$('.package-1-hide').css('display', 'block');
});
$('.package-1-hide').click(function () {
$('.js-package-1').css('display', 'none');
$('.package-1-hide').css('display', 'none');
$('.package-1-show').css('display', 'block');
});
$('.package-2-show').click(function () {
$('.js-package-2').css('display', 'block');
$('.package-2-show').css('display', 'none');
$('.package-2-hide').css('display', 'block');
});
$('.package-2-hide').click(function () {
$('.js-package-2').css('display', 'none');
$('.package-2-hide').css('display', 'none');
$('.package-2-show').css('display', 'block');
});#packages-list-1, #packages-list-2 {
padding: 20px;
}
.name {
font-size: 22px;
font-weight: bold;
padding-bottom: 10px;
}
.package-1-show, .package-2-show {
cursor: pointer;
display: block;
padding-bottom: 10px;
}
.package-1-hide, .package-2-hide {
cursor: pointer;
display: none;
padding-bottom: 10px;
}
.js-package-1, .js-package-2 {
display: none;
}<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id = "packages-list-1">
<div class = "name">Package 1</div>
<div class = "package-1-show">View</div>
<div class = "package-1-hide">Hide</div>
<div class = "js-package-1">Package 1 description</div>
</div>
<div id = "packages-list-2">
<div class = "name">Package 2</div>
<div class = "package-2-show">View</div>
<div class = "package-2-hide">Hide</div>
<div class = "js-package-2">Package 2 description</div>
</div>Но тогда я хочу подключить PHP, и моя страница будет выглядеть так
<?php foreach ($items as $item) { ?>
<div id = "packages-list-<?= $item->id ?>">
<div class = "name">Package <?= $item->id ?></div>
<div class = "package-<?= $item->id ?>-show">View</div>
<div class = "package-<?= $item->id ?>-hide">Hide</div>
<div class = "js-package-<?= $item->id ?>">Package <?= $item->id ?> description</div>
</div>
<?php } ?>
И таких элементов на странице может быть хоть 1, хоть 5, хоть 10.
Но что мне делать дальше со сценарием? Мне как-то нужно передать идентификаторы пакетов в JavaScript, чтобы скрипт выглядел примерно так
$('.package-' + item_id + '-show').click(function () {
$('.js-package-' + item_id).css('display', 'block');
$('.package-' + item_id + '-show').css('display', 'none');
$('.package-' + item_id + '-hide').css('display', 'block');
});
$('.package-' + item_id + '-hide').click(function () {
$('.js-package-'+ item_id).css('display', 'none');
$('.package-' + item_id + '-hide').css('display', 'none');
$('.package-' + item_id + '-show').css('display', 'block');
});
Но как мне передать идентификаторы элементов из PHP в JavaScript?
И еще, что мне делать с частью css, ведь там у меня тоже фиксированные идентификаторы?
Хоть это и не элегантно, но точно так же, как вы прокручиваете и выводите <div>, вы можете прокручивать и выводить JS.
Для ясности: в настоящее время вы не используете атрибут HTML id ни в CSS, ни в JavaScript. Вы используете классы, которые должны быть более общими и неприменимыми к одному элементу, например ID. Ответ – рекомендуемый способ сделать это. Правило №1 программирования: не повторяйтесь. Если несколько элементов ведут себя одинаково, напишите код один раз.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Существует больше способов выбора элементов и взаимодействия с ними, чем уникальные идентификаторы. В этом случае вы не хотите повторять один и тот же код снова и снова, меняя только число. Вместо этого обобщите обработчик событий click, чтобы он работал с каждым показанным набором элементов.
Для любой конкретной ссылки «показать/скрыть» выберите элемент(ы) относительно этой ссылки. Например:
$('.show').click(function () {
$(this).siblings('.description').css('display', 'block');
$(this).css('display', 'none');
$(this).siblings('.hide').css('display', 'block');
});
$('.hide').click(function () {
$(this).siblings('.description').css('display', 'none');
$(this).css('display', 'none');
$(this).siblings('.show').css('display', 'block');
});#packages-list-1, #packages-list-2 {
padding: 20px;
}
.name {
font-size: 22px;
font-weight: bold;
padding-bottom: 10px;
}
.show {
cursor: pointer;
display: block;
padding-bottom: 10px;
}
.hide {
cursor: pointer;
display: none;
padding-bottom: 10px;
}
.description {
display: none;
}<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id = "packages-list-1">
<div class = "name">Package 1</div>
<div class = "show">View</div>
<div class = "hide">Hide</div>
<div class = "description">Package 1 description</div>
</div>
<div id = "packages-list-2">
<div class = "name">Package 2</div>
<div class = "show">View</div>
<div class = "hide">Hide</div>
<div class = "description">Package 2 description</div>
</div>Здесь я специально использую .siblings() для нацеливания на ближайшие элементы относительно элемента, по которому щелкнули. Существует множество методов обхода DOM, которые можно использовать для поиска элементов относительно выбранного элемента. (Например, общий шаблон, который я использовал в более сложной разметке, заключается в использовании .closest() для перехода к известному общему родительскому элементу, а затем .find() для целевого элемента(ов) внутри этого общего родительского элемента.)
Возможно, вам даже не понадобится, чтобы эти родительские элементы имели идентификаторы, как здесь. Я в основном предполагаю баланс между общими наборами разметки и необходимостью использования идентификаторов в вашем случае использования. Этот баланс может простираться настолько далеко, насколько вам хочется. Но общая цель состоит в том, чтобы обобщить функциональность, которую необходимо применять неоднократно, чтобы вам не приходилось снова и снова копировать/вставлять один и тот же код.
Если вам нужно передать значения из PHP в JavaScript, вы можете сделать это так же, как и для HTML. Вам понадобится элемент <script> в этом HTML:
<script>
$('.js-package-<?= $item->id ?>').css('display', 'none');
</script>
JavaScript в файлах .js всегда должен оставаться пригодным для повторного использования и не должен ссылаться на определенные идентификаторы.
Похоже, вам лучше делегировать события, а не поддерживать сложную систему идентификаторов.