jQuery、Smarty、CSS、HTML - 两个列表 ，以几种不同的方式管理

Question

我遇到了以下问题。所以有两个列表 - 每个列表都显示图片(产品的功能)。一个显示所有小于 150px 的特征，另一个显示所有大于 150px 的特征。现在，我们有三种情况(取决于特定产品的功能):1. 大图和小图都显示。2. 只显示小图片。3.只显示大图。在第一种情况下，图片分为两列 - 左侧较小，右侧较大。它们之间还有一个 div(带有 position:absolute)，用作垂直边框。我想改变它们的显示方式，当我们遇到情况 2 或 3 - 只有小图片或大图片时，不应该有这个垂直边框，并且可见的某些 UL 应该是 100% 宽度。实现这一目标的最佳方法是什么？纯 CSS？查询？ PHP？顺便提一句。这些列表是通过 Smarty 获取的。

请看代码:

---

jQuery:

$(document).ready(function() {
    $("#idTab1Tags li").each(function() {
        var $this = $(this);
        $this.css({width: 'auto', height: 'auto'});
        var pic_real_width = $this.width();
        var pic_real_height = $this.height();
        if(pic_real_width<150){
                $(this).addClass("imgSmall");
        }
        else {
                $(this).addClass("imgBig");
        }
    });
 });

---

HTML/Smarty:

{if $tags}
        <div id="idTab1Tags">
            <div id="idTab1TagsContainer">
                <ul id="tagsicons" class="tagsicons tagsSmall">
                    {foreach from=$tags item=tag}
                    <li>
                        {if $tag.link}<a href="{$tag.link}">{/if}

                        <img src="{$base_dir}modules/tagsicons/images/{$tag.id}.{$tag.extension}" onselectstart="return false;" ondragstart="return false;" alt="{$tag.tag|escape:'htmlall':'UTF-8'}" />

                        {if $tag.link}</a>{/if}


                        {if $tag.description}<span>{$tag.description}</span>{/if}
                    </li>
                    {/foreach}
                    <div class="clear"></div>
                </ul>
                <ul id="tagsicons" class="tagsicons tagsBig">
                    {foreach from=$tags item=tag}
                    <li>
                        {if $tag.link}<a href="{$tag.link}">{/if}

                        <img src="{$base_dir}modules/tagsicons/images/{$tag.id}.{$tag.extension}" onselectstart="return false;" ondragstart="return false;" alt="{$tag.tag|escape:'htmlall':'UTF-8'}" />

                        {if $tag.link}</a>{/if}


                        {if $tag.description}<span>{$tag.description}</span>{/if}
                    </li>
                    {/foreach}
                    <div class="clear"></div>
                </ul>
                <div class="clear"></div>
                <div id="idTab1TagsContainerBorder"></div>
            </div>
        </div>
    {/if} 

---

CSS:

ul#tagsicons {
    clear: both;
    list-style: none;
    padding-left: 0;
    width:456px;
    display:inline-block;
}
#idTab1Tags { margin:15px 0 0 0; }
ul#tagsicons li { display:inline-block; vertical-align:middle; position:relative; }
.tagsSmall { margin:0 7px 0 0; }
.tagsSmall li { margin:0 13px 13px 0; }
.tagsBig li { margin:0 0 13px; }
#idTab1TagsContainer {
    padding:0 0 0 20px;
    position:relative;
}
#idTab1TagsContainerBorder {
    position:absolute;
    background:#F5F5F5;
    width:1px;
    height:100%;
    top:0;
    left:459.5px;
}
.tagsSmall .imgBig, .tagsBig .imgSmall { display:none !important; }

---

所以边框是#idTab1TagsContainerBorder，小图在.tagsSmall里面，大图在.tagsBig

感谢您的帮助。

编辑:

同时我找到了解决方案:

jQuery:

var big = $( ".tagsBig li" );
var small = $( ".tagsSmall li" );
if (big.is(":visible")){ 
} else {
    $(".tagsSmall").addClass("wideSmall");
    $('#idTab1TagsContainerBorder').hide(1);    
}
if (small.is(":visible")){ 
} else {
    $(".tagsBig").addClass("wideBig");
    $('#idTab1TagsContainerBorder').hide(1);    
}

CSS:

.wideSmall { width:100% !important; }
.wideBig { width:110% !important; }
.wideBig li { margin:margin:0 7px 13px 0 !important; }

Serious 的以下解决方案也有效。

Answer 1

您可以存储每种类型的图像，然后检查存在哪些图像，然后隐藏 UI 的某些部分:

var smallImages = [];
var bigImages = [];

$("#idTab1Tags li").each(function()
{
    var $this = $(this);

    $this.css({width: 'auto', height: 'auto'});
    var pic_real_width = $this.width();
    var pic_real_height = $this.height();
    if(pic_real_width<150)
    {
        smallImages.push($this);
        $(this).addClass("imgSmall");
    }
    else
    {
        bigImages.push($this);
        $(this).addClass("imgBig");
    }
}

if (smallImages.length == 0)
{
    $("ul .tagsSmall").hide();
}
if (bigImages.length == 0)
{
    $("ul .tagsBig").hide();
}
if (smallImages.length == 0 || bigImages.length == 0)
{
    $("#idTab1TagsContainerBorder").hide();
}