我做了一个小脚本，这样当我点击一个按钮时，我可以显示或隐藏描述。
$('.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个这样的元素
但我接下来该怎么处理剧本呢？我需要以某种方式将包的ID转换为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');
});但是如何将元素的ID从PHP转换到JavaScript呢？
还有，我应该怎么处理css部分，因为我在那里也有固定的ID？
1条答案
按热度按时间vaj7vani1#
除了唯一标识符之外，还有更多的方法可以选择元素并与之交互。在这种情况下，你不想重复相同的代码一遍又一遍地改变一个数字。相反，将
click事件处理程序一般化以处理所示的每一组元素。对于任何给定的显示/隐藏链接，定位与该链接相关的元素。举例来说：
在这里，我专门使用
.siblings()来定位相对于被单击元素的邻近元素。有多种DOM traversal methods可用于查找与单击的元素相关的元素。（例如，我在更复杂的标记中使用的一个常见模式是使用.closest()遍历到一个已知的公共父元素，然后使用.find()遍历到该父元素中的目标元素。你甚至可能不需要这些父元素像这里一样有标识符。我主要是在猜测通用标记集与需要在用例中使用标识符。这种平衡可以走得很远，只要你喜欢。但总的来说，这是为了泛化需要像这样重复应用的功能，这样您就不必一遍又一遍地复制/粘贴相同的代码。
如果需要将值从PHP传递到JavaScript，可以使用与传递HTML相同的方法。你需要在HTML中添加一个
<script>元素：.js文件中的JavaScript应该始终保持可重用，并且不引用特定的ID。