使用Javascript为Bootstrap Carousel关闭标签

时间:2014-12-31 10:11:56

标签: javascript jquery

我有一个动态网站,想要使用Bootstrap Carousel。由于项目大小可以更改,我需要关闭项目标记到窗口大小并打开一个新的符合响应度。

要捕获窗口大小我正在使用下面的Javascript

$(window).ready(function() {
    var wi = $(window).width();  
    if (wi <= 480){
            $("div.item-width").text('Screen width is greater than 480px. Width is currently: ' + wi + 'px.');
            $("div.item-width").addClass('col-xs-2');
            }
        else if (wi <= 767){
            $("div.item-width").text('Screen width is greater than 768px. Width is currently: ' + wi + 'px.');
            $("div.item-width").addClass('col-sm-3');
            }
        else {
        $("div.item-width").text('Screen width is greater than all. Width is currently: ' + wi + 'px.');
        }  

    $(window).resize(function() {
        var wi = $(window).width();

        if (wi <= 480){
            $("div.item-width").text('Screen width is greater than 480px. Width is currently: ' + wi + 'px.');
            $("div.item-width").addClass('col-xs-2');
            }
        else if (wi <= 767){
            $("div.item-width").text('Screen width is greater than 768px. Width is currently: ' + wi + 'px.');
            $("div.item-width").addClass('col-sm-3');
            }
        else {
            $("div.item-width").text('Screen width is greater than all. Width is currently: ' + wi + 'px.');
            }  
    });            
});

我的HTML就像这里

<div class="item">
    {foreach name=boxartikel from=$Box->Artikel->elemente item=Artikel}
        <div class="item-width">
            <img src="" />
        </div>
    {/foreach}
</div>

我想,例如,如果我们在item-width内有6个图像,并且窗口大小是750px而不是将col-sm-3添加到item-width,请关闭item类之后的标记4张图片并打开一个带item类的新DIV标签。由于我不是编码器,我试图以某种方式对其进行排序。

0 个答案:

没有答案