Question

我的页面上有几个可折叠元素，它们被隐藏并使用jquery的.toggleClass（）函数显示。但是，如果它们具有相同的ID，则只有一个元素可用。它现在起作用，但我觉得必须有更好的方法来解决这个问题，因为它感觉有点笨重。

以下是两个元素的HTML：

        <div>
            <h1 id="collapseGallery">Contemporary Issues in Painting: Digital Media</h1>
            <div id="galleryImg" class="hide">
                <?php include 'imagesCIPD.php'; ?>
            </div>
            <h1 id="collapseGallery2">Contemporary Issues in Painting: Traditional Media</h1>
            <div id="galleryImg2" class="hide">
                <?php include 'imagesCIPT.php'; ?>
            </div>
        </div>

和JS

$('#collapseGallery').ready(function () {
    $('#collapseGallery').click(function () {
        $('#galleryImg').toggleClass('hide');
    });
});

$('#collapseGallery2').ready(function () {
    $('#collapseGallery2').click(function () {
        $('#galleryImg2').toggleClass('hide');
    });
});

基本上我正在寻找的是只有一个ID的方法，即#collapseGallery，然后将其用于多个可折叠元素。

Answer 1

不是使用ID，而是为它们提供相同的类，您可以这样选择它们。此外，为了找到要折叠的相应图片div的最简单路径，您可以将该元素的ID作为数据属性添加到您的点击中。

<h1 id="collapseGallery1" class="collapse" data-image-id="galleryImg1">...
<h1 id="collapseGallery2" class="collapse" data-image-id="galleryImg2">...

然后你只需要在你的javascript中使用它：

$(document).ready(function() {
    $('.collapse').click(function() {
        var imgId = $(this).attr('data-image-id');

        $('#' + imgId).toggleClass('hide');
    });
});

有没有办法可以将多个可折叠元素组合成一个jquery函数？

1 个答案: