• Ecshop 单选按钮组功能 颜色多选


    效果:

    js代码:

    function changeAtt(t,src,key) {
        document.getElementById('spec_value_'+src).checked='checked';
        div = document.getElementById("EXP_"+key);
        elems = div.getElementsByTagName("dd")[0].getElementsByTagName("a");
    
        for(i=0;i<elems.length;i++){
            elems[i].className='';    
        }
        t.className = "on";
    
        changePrice();  /*每次调整价格 都需要用到的*/
    }

    扩展参数:经过服务器解析

    <div class="gdExp-cs" id="EXP_1">
                        
                             
                             
                              
                                <dd>
                                                                <a href="javascript:" name="spec_1" class="" onclick="changeAtt(this,1,1)">无内存卡 <span></span></a>
                                    <input type="radio" name="spec_1" value="1" id="spec_value_1" checked="" onclick="changePrice()" style="display: none">
                                                                <a href="javascript:" name="spec_1" onclick="changeAtt(this,3,1)" class="on">16G <span></span></a>
                                    <input type="radio" name="spec_1" value="3" id="spec_value_3" onclick="changePrice()" style="display: none">
                                                                <a href="javascript:" name="spec_1" onclick="changeAtt(this,2,1)" class="">32G <span></span></a>
                                    <input type="radio" name="spec_1" value="2" id="spec_value_2" onclick="changePrice()" style="display: none">
                                                                <a href="javascript:" name="spec_1" onclick="changeAtt(this,4,1)" class="">8G <span></span></a>
                                    <input type="radio" name="spec_1" value="4" id="spec_value_4" onclick="changePrice()" style="display: none">
                                                            </dd>
                                <input type="hidden" name="spec_list" value="3">
                             
                                
                            
                        
                   </div>

    扩展参数:原代码

    <div class="gdExp-cs" id="EXP_{$spec_key}">
          <!-- {* 判断属性是复选还是单选 *} --> 
          <!-- {if $spec.attr_type eq 1} --> 
          <!-- {if $cfg.goodsattr_style eq 1} --> 
          <dd >
          <!-- {foreach from=$spec.values item=value key=key} -->
          <a href="javascript:"  name="spec_{$spec_key}" {if $key eq 0}class="on"{/if} onclick="changeAtt(this,{$value.id},{$spec_key})">{$value.label} <span></span></a>
          <input type="radio" name="spec_{$spec_key}"  value="{$value.id}" id="spec_value_{$value.id}" {if $key eq 0}checked{/if}  onclick="changePrice()" style="display: none"/>
          <!-- {/foreach} -->
          </dd>
          <!-- {/foreach} -->
          <!-- {/if} --> 
    </div>
  • 相关阅读:
    23种设计模式中的模板模式
    23种设计模式中的外观模式
    div,li,span自适应宽度换行问题
    监听自定义ItemRender的事件
    flex acionscript png图片去除多余空白,生成合适大小图片
    项目中用到RouteTable,发布到IIS7中无法访问
    记录Castle ActiveRecord访问Sqlite的配置
    如何卸载软件
    linux 下route命令
    linux 下 ifcfg-eth0 配置 以及ifconfig、ifup、ifdown区别
  • 原文地址:https://www.cnblogs.com/wesky/p/3286695.html
Copyright © 2020-2023  润新知