javascript - 当取决于屏幕分辨率时如何计算每行中显示的div的数量

标签 javascript jquery css html

我有以下代码:

HTML

<div class="content" style="height: 30px;">
    <div class="content-box" id="myOptions">
        <div class="options-holder">
            <input type="checkbox" name="11111" id="Bob_111">
            <label for="111">Alex_1</label>
        </div>
        <div class="options-holder">
            <input type="checkbox" name="22222" id="Bob_222">
            <label for="222">Alex_2</label>
        </div>
        <div class="options-holder">
            <input type="checkbox" name="33333" id="Bob_333">
            <label for="333">Alex_3</label>
        </div>
        <div class="options-holder">
            <input type="checkbox" name="44444" id="Bob_444">
            <label for="444">Alex_4</label>
        </div>
        <div class="options-holder">
            <input type="checkbox" name="55555" id="Bob_555">
            <label for="555">Alex_5</label>
        </div>
        <div class="options-holder">
            <input type="checkbox" name="66666" id="Bob_666">
            <label for="666">Alex_6</label>
        </div>
        <div class="options-holder">
            <input type="checkbox" name="77777" id="Bob_777">
            <label for="777">Alex_7</label>
        </div>
        <div class="options-holder">
            <input type="checkbox" name="88888" id="Bob_888">
            <label for="888">Alex_8</label>
        </div>
    </div>
</div>
<div class="button-wrapper"> <a href="#" class="toggle-trigger" id="showMoreButton" style="display:none;">
    <span data-collapse-text="Show less" data-expand-text="Show more" class="state up">Show more</span></a>
</div>

JAVASCRIPT
$.fn.myToggle = function () {
    return this.each(function () {
        var targetContainer = $(this),
            targetBox = targetContainer.find('.content'),
            targetTrigger = targetContainer.find('.toggle-trigger'),
            targetState = targetTrigger.find('.state'),
            contentBox = targetBox.find('.content-box'),
            boxHeight = contentBox.outerHeight(),
            optionHeight = targetBox.find('.options-holder').outerHeight();
        $(window).on('resize', function () {
            boxHeight = contentBox.outerHeight();
            if (targetState.hasClass('down')) {
                targetBox.stop(true, false).animate({
                    height: boxHeight
                });
            }
        });
        targetTrigger.on('tap', function () {
            targetBox.stop(true, false);
            if (targetState.hasClass('down')) {
                targetState.text(targetState.data('expand-text'));
                targetBox.animate({
                    height: optionHeight
                });
            } else {
                targetState.text(targetState.data('collapse-text'));
                targetBox.animate({
                    height: boxHeight
                });
            }
            targetState.toggleClass('up down');
            return false;
        });
    });
};
$(this.el).myToggle().on('click', '.checkbox-toggle', function (event) {
    var toggle = $(this),
        container = toggle.closest('.option-filter');

    event.preventDefault();
    container.find(':checkbox').prop('checked', toggle.hasClass('all'));
});

问题是 .option-holder我的 .content-box 中只有一行 div 不适合div 所以我必须隐藏它们并创建一个显示更多/更少切换按钮来显示或隐藏其余部分。

一切正常,直到我只有特定数量的 .option-holder div 只适合一行,所以我不需要切换按钮(div 的数量来自服务器动态)。

我目前的解决方案是计算 div 的数量并仅在它们超过 4 个时才显示切换按钮(在大多数屏幕分辨率中,我每行得到 4 个 div)。
问题是当屏幕分辨率更大并且我每行得到 5 或 6 个时。

如果我每行有 6 个 div,但只显示 5 个 div,那么该按钮仍然存在,因为我在 4 个 div 之后显示它。

我知道有很多简单的修复方法,但我不允许重写代码和更改其逻辑,所以我必须找到一种方法来计算每次连续显示多少个 div。

该代码现在只需更改 div .content 的高度即可工作每次我单击按钮以显示或隐藏其余 div 而不给“未显示” div 任何额外属性时,例如style="display: none;跟...共事。

before toggle

after toggle

有什么建议么??

最佳答案

var divs = document.querySelectorAll('.options-holder'); //or getElementsByClassName... or just $('.options-holder').....
var x = divs.length;
var number_of_elements_in_first_row = 0;
for ( var i = 0; i < x; i++;) {
    if ( divs[0].offsetHeight !== divs[i].offsetHeight ) {
        divs[i].style.display = "none"; // hide divs[i]
        /* or if you need only number of elements per row
           add this instead hiding elements */
        number_of_elements_in_first_row = i;
        break;
    }
}

if ( divs[0].offsetHeight !== divs[x].offsetHeight )
    // add/show your MORE button... your function call

所以,主要思想是,如果你有不止一行,最后一个元素将有不同的垂直位置。

编辑:
此代码将通过目标 div 数组并隐藏所有未与第一个垂直对齐的 div。这不是完整的解决方案,更多的是如何处理这个问题。

关于javascript - 当取决于屏幕分辨率时如何计算每行中显示的div的数量,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29961900/

相关文章:

javascript - 使用 Crafty.js 和 Box2d 绘制一个简单的圆圈

javascript - 需要防止鼠标悬停在jQuery中的点击

javascript - 我应该两次验证我的表格吗?

html - 悬停以更改颜色时的h1行高或高度问题

css - 如何在img标签所在的位置显示此SVG图像

javascript - 如何确定 JS 文件是否与 AMD 兼容?

php - 如何在 DIV 中使用 html 标签限制内容

javascript - ReactJS 中具有相同 props 的组件的条件渲染

javascript - 滚动时触摸的CSS或Javascript事件

c# - CSS和JS总是返回404本地