Question

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

每张幻灯片中有5个div部分。如果div长度为5+，则会在下一张幻灯片中显示。

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

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

我的结构看起来像这样：

<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>

如何基于jquery中的搜索过滤器管理动态bootstrap轮播幻灯片

0 个答案: