jquery 将元素ID从PHP传输到JavaScript

js81xvg6  于 2023-10-17  发布在  jQuery
关注(0)|答案(1)|浏览(129)

我做了一个小脚本,这样当我点击一个按钮时,我可以显示或隐藏描述。

$('.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?

vaj7vani

vaj7vani1#

除了唯一标识符之外,还有更多的方法可以选择元素并与之交互。在这种情况下,你不想重复相同的代码一遍又一遍地改变一个数字。相反,将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 traversal methods可用于查找与单击的元素相关的元素。(例如,我在更复杂的标记中使用的一个常见模式是使用.closest()遍历到一个已知的公共父元素,然后使用.find()遍历到该父元素中的目标元素。
你甚至可能不需要这些父元素像这里一样有标识符。我主要是在猜测通用标记集与需要在用例中使用标识符。这种平衡可以走得很远,只要你喜欢。但总的来说,这是为了泛化需要像这样重复应用的功能,这样您就不必一遍又一遍地复制/粘贴相同的代码。
如果需要将值从PHP传递到JavaScript,可以使用与传递HTML相同的方法。你需要在HTML中添加一个<script>元素:

<script>
$('.js-package-<?= $item->id ?>').css('display', 'none');
</script>

.js文件中的JavaScript应该始终保持可重用,并且不引用特定的ID。

相关问题