计算 javascript/jQuery 中隐藏标签的数量

Question

我在父对象内部有特定高度和隐藏溢出的标签。我想计算隐藏标签的数量。

我尝试过这种方法，但结果是错误的，甚至显示为负数。 如何计算隐藏标签的正确数量并在其他元素中显示它们

HTML 块：

 <div id="projectEndUserBloc">
    <div class="project-detail-market-subtitle">
        <img class="project-detail-market-img" alt="Author picture" src="/wp-content/themes/engiedigital/img/smp/logo-people.svg" />
        <label class="subtitle-project">End users</label>
    </div>
    <div class="d-flex flex-wrap align-items-center">
        <div id="projectEndUserContent" class="project-detail-tag-container" style="height: 92px; overflow: hidden;">
            <div class="nj-tag light-blue-tag"><span class="nj-tag__text">hzeljahef</span></div>
            <div class="nj-tag light-blue-tag"><span class="nj-tag__text">ef</span></div>
            <div class="nj-tag light-blue-tag"><span class="nj-tag__text">fae</span></div>
            <div class="nj-tag light-blue-tag"><span class="nj-tag__text">azfeafz</span></div>
            <div class="nj-tag light-blue-tag"><span class="nj-tag__text">efaz</span></div>
            <div class="nj-tag light-blue-tag"><span class="nj-tag__text">ezfa</span></div>
            <div class="nj-tag light-blue-tag"><span class="nj-tag__text">feza</span></div>
            <div class="nj-tag light-blue-tag"><span class="nj-tag__text">fazfe</span></div>
            <div class="nj-tag light-blue-tag"><span class="nj-tag__text">zfz</span></div>
            <div class="nj-tag light-blue-tag"><span class="nj-tag__text">feef</span></div>
            <div class="nj-tag light-blue-tag"><span class="nj-tag__text">zeaf</span></div>
            <div class="nj-tag light-blue-tag"><span class="nj-tag__text">faz</span></div>
            <div class="nj-tag light-blue-tag"><span class="nj-tag__text">fef</span></div>
            <div class="nj-tag light-blue-tag"><span class="nj-tag__text">aze</span></div>
            <div class="nj-tag light-blue-tag"><span class="nj-tag__text">zaef</span></div>
            <div class="nj-tag light-blue-tag"><span class="nj-tag__text">fez</span></div>
        </div>
        <span class="count-hidden" style="display: none;">+-1</span>
        <span class="show-less-tag d-flex" style="display: none;">Show less</span>
    </div>
</div>

代码：

$('#projectEndUserContent').on('DOMSubtreeModified', function() {
    var nb_all = $('#projectEndUserContent .nj-tag.light-blue-tag').length;
    var hidden_children = 0;
    var parent = document.getElementById('projectEndUserContent');
    var showing_children = 1;
    [].slice.call(document.querySelectorAll('#projectEndUserContent .light-blue-tag')).forEach(function(child) {
        if (isVisible(parent, child) == true) {
            showing_children += 1;
        };
    });

    function isVisible(parent, child) {
        return !(
            (child.offsetLeft - parent.offsetLeft > parent.offsetWidth) ||
            (child.offsetTop - parent.offsetLeft > parent.offsetHeight)
        )
    }
    hidden_children = nb_all - showing_children;
    if (hidden_children != 0) {
        $('#projectEndUserBloc .count-hidden').toggleClass('d-flex')
    }
    $('#projectEndUserBloc .count-hidden').text('+' + hidden_children);
    $('#projectEndUserBloc .count-hidden').on('click', function() {
        $(this).parent().children('#projectEndUserContent').css({
            'height': 'max-content',
            'overflow': 'visible'
        });
        $(this).css('display', 'none');
        $(this).parent().children('.show-less-tag').toggleClass('d-flex');
    });
    $('#projectEndUserBloc .show-less-tag').on('click', function() {
        $(this).parent().children('#projectEndUserContent').css({
            'height': '92px',
            'overflow': 'hidden'
        });
        $(this).css('display', 'none');
        $('#projectEndUserBloc .count-hidden').toggleClass('d-flex');
    });
});

Answer 1

我没有理解你想用这段代码完成的所有事情，但是通过快速阅读代码，这似乎是一个错误：

function isVisible(parent, child) {
    return !(
        (child.offsetLeft - parent.offsetLeft > parent.offsetWidth) ||
        (child.offsetTop - parent.offsetLeft > parent.offsetHeight)
    )
}

我认为应该是：

function isVisible(parent, child) {
    return !(
        (child.offsetLeft - parent.offsetLeft > parent.offsetWidth) ||
        (child.offsetTop - parent.offsetTop > parent.offsetHeight)
    )
}