首页 > 代码库 > 做数字判断显示相应的图标d艾玛

做数字判断显示相应的图标d艾玛

2024-09-16 23:57:06   215人阅读

效果为：当input值为0时，右侧图片字体均为为暗色，当input值>0时，右侧图片及文字均变色；

当值为1-5/6-10/11-15时，小图标显示的数量为相应的数字和相应的星星/砖石/皇冠。小图标数量最多为5个。

如图所示：

技术分享

技术分享

html代码为：

 <div class="caution-con bgf">
        <a class="href" href=http://www.mamicode.com/"javascript:;"></a>
        <span class="caution-icon"><img src=http://www.mamicode.com/"images/icon3.png"></span>
        <p class="caution-type">
            <span class="block fz30">奥迪A6L（白色）</span>
            <span class="block fz28 spans c4">豫A00000</span>
            <input class="hidden" type="hidden" name="level" value=http://www.mamicode.com/"0"/>
            <span class="icon-right block spant"><img src=http://www.mamicode.com/""><img src=http://www.mamicode.com/""><img src=http://www.mamicode.com/""><img src=http://www.mamicode.com/""><img src=http://www.mamicode.com/""></span>
        </p>
        <p class="caution-state fr">
            <span class="block submit-icon"><img src=http://www.mamicode.com/""></span>
            <span class="span-gray fz30"><i>￥</i><u>350</u></span>
        </p>
    </div>
     <div class="caution-con bgf">
        <a class="href" href=http://www.mamicode.com/"javascript:;"></a>
        <span class="caution-icon"><img src=http://www.mamicode.com/"images/icon3.png"></span>
        <p class="caution-type">
            <span class="block fz30">奥迪A6L（白色）</span>
            <span class="block fz28 spans c4">豫A00000</span>
            <input class="hidden" type="hidden" name="level" value=http://www.mamicode.com/"7"/>
            <span class="icon-right block spant">
            <img src=http://www.mamicode.com/""><img src=http://www.mamicode.com/""><img src=http://www.mamicode.com/""><img src=http://www.mamicode.com/""><img src=http://www.mamicode.com/"">
            </span>
        </p>
        <p class="caution-state fr">
            <span class="block submit-icon"><img src=http://www.mamicode.com/""></span>
            <span class="span-gray fz30"><i>￥</i><u>350</u></span>
        </p>
    </div>

js代码为：

<script type="text/javascript">
var inputs=$("input[name=‘level‘]");
for(var k=0;k<inputs.length;k++)
{
    var value =http://www.mamicode.com/ inputs.eq(k).val();
    if(value  =http://www.mamicode.com/= ‘0‘)
    {
        // 右侧图标显示及字体变色
        $(‘.submit-icon img‘).eq(k).attr(‘src‘,‘images/submit2.png‘);
        $(‘.span-gray‘).eq(k).css({‘color‘:‘#c8c8c8‘});
        $(‘.icon-right‘).eq(k).css({‘opacity‘:‘0‘});
    }
    else
    {
        $(‘.submit-icon img‘).eq(k).attr(‘src‘,‘images/submit1.png‘);
        $(‘.span-gray‘).eq(k).css({‘color‘:‘#ff3b3b‘});

        var $img=$(‘.icon-right img‘);
        var num = Math.ceil((value-1)/5+0.1);
        var pngurl = ‘images/icon‘+num+‘.png‘;
        for(var i=0;i<value%5;i++)
        {
            $img.eq(k*5+value%5-i-1).attr({‘src‘:pngurl})
            $img.eq(k*5+value%5-1).nextAll().css({‘opacity‘:‘0‘});
        }
        if(value%5 == 0)
        {
            for(var i=0;i<5;i++)
            {
                $img.eq(k*5+i).attr({‘src‘:pngurl});
            }
        }
    }
}

</script>

 

做数字判断显示相应的图标d艾玛


联系
我们