1

我面临着如何管理动态引导轮播幻灯片的挑战。要求是我的过滤器功能适用于下拉菜单选择以及复选框检查。

每张幻灯片中有 5 个 div 部分。如果 div 长度达到 5+，它将显示在下一张幻灯片中。

当我选择下拉菜单选项时，例如。我从下拉列表中选择 option1 所有与“option1”相关的 div 应显示在幻灯片中，如果 div 大小小于 5，则仅显示一张幻灯片，如果 div 大小为 5+，则下一个 div 将显示在另一张幻灯片中. 还有一个挑战是当您选择“option1”然后单击 div 也重新过滤的复选框时。

我尝试了数组和循环，但没有得到任何解决方案。请帮忙。

我的结构如下所示：

<div class="FilterSection">
        <select class="category form-control" >
        <option value="option1">Option 1</option>
        <option value="option2">Option 2</option>
        <option value="option3">Option 3</option>
        <option value="option4">Option 4</option>
    </select>
    <div class="checkboxSection" style="color:red;">
        <input type="checkbox" value="checkbox1" /> Checkbox1 
        <input type="checkbox" value="checkbox2" /> Checkbox2 
        <input type="checkbox" value="checkbox3" /> Checkbox3 
        <input type="checkbox" value="checkbox4" /> Checkbox4 
        <input type="checkbox" value="checkbox5" /> Checkbox5 
    </div>
    <div class="filterResultSection">
        <div class="option1 checkbox1 well text-info">Div container 1</div>
        <div class="option2 checkbox2 well text-info">Div container 2</div>
        <div class="option3 checkbox3 well text-info">Div container 3</div>
        <div class="option4 checkbox4 well text-info">Div container 4</div>
        <div class="option2 checkbox5 well text-info">Div container 5</div>
    </div>
</div>
4

0 回答 0