Question

我有以下代码：

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 div不适合我.content-box div中的一行，所以我必须隐藏它们并创建一个显示更多/更少切换按钮来显示或隐藏其余部分。

一切正常，直到我只有特定数量的.option-holder div才适合一行，所以我不需要切换按钮（div的数量来自服务器）。 / p>

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

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

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

现在代码只需在每次单击按钮时更改div .content的高度，以显示或隐藏其余div而不给出“不显示”div的任何额外属性，例如style="display: none;可以使用。

before toggle

after toggle

有什么建议吗？

Answer 1

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

~~所以，主要的想法是，如果你有多行，最后一个元素将有不同的垂直位置。~~

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

Answer 2

.offsetLeft

这是所需的解决方案，因为public class NewPasword { @NotEmpty(message="Please Provide Password") @Pattern(regexp = "^(?=.*?[A-Z])(?=.*?[0-9])(?=\\S+$).{8,}$", message = "{encryptedpassword.required}") @Size(min=8, max=19) private String newPassword; ........ ....... }在每行的每个第一个div中都是相同的。

如何根据屏幕分辨率计算每行中显示的div数

2 个答案: