There are questions remain, We'll search for the answers together. But one thing we known for sure,the future is not set!

【原创文章】美化ecshop物流与支付方式之js遍历元素更改css属性

ecshop 百蔬君 4833℃ 已收录 0评论

ecshop的购物车程序是非常简陋的,这几天添加了一些支付方式,顺便就像把物流方式美化了一下,就是把原来都是列表式的样式换成了图片。我们做出的方案是前面是input选项,后面是一个label,主要就是放置相关物流的图片,然后放在li标题中,然后foreach循环,列出所有的物流方式。label与input之间的互动比较简单,只要把他们的id设置为相同值就可以了,这样当我们点击label中的图片的时候,input就会自动被选择。但是如果我们想在点击这个label或者input的时候,让整理li的边框都变色,这样来表示提醒顾客选中了某一个物流方式,这样使得网站更加具有亲和性。那么这个问题的实质就是点击某一li的时候,检查所有相关li的class属性,取消其它地方的class,而在当前选择的li中添加这个class,这样就实现了醒目地标识当前选项的目的,这可以通过js代码来实现,也就是今天说的js遍历元素更改css属性问题。

首先看一下最终的效果

Snap1

 

Snap2

 

点击一个物流方式,那么这个li的边框就会变成红色。要修改美化支付和物流方式,当然是在购物车的程序中来修改,具体文件为wwwroot\themes\你的主题\flow.dwt

之前在一个ecshop支付宝网银直连插件UTF8编码最新版(已更新)插件资料中看到过一个代码是这样的。

<link href="wangyin.css" rel="stylesheet" type="text/css" />
<div class="flowBox">
<h6><span>{$lang.payment_method}</span></h6>
<script type="text/javascript">
function sel(obj)
{
var li=document.getElementsByTagName("li");
for(var i=0;250;i++)
{
if(li[i]!=obj)
{
li[i].style="";
}
else
li[i].style="border:1px solid #E4393C;"
}
}
</script>

<div class="mc">
<dd >
<ul class="xuanze">使用第三方支付平台支付>></ul>
<ul class="list-bank">
<!-- {foreach from=$payment_list item=payment} -->
{if $payment.pay_order < 200}
<li id="li{$payment.pay_id}" {if $order.pay_id eq $payment.pay_id}style="border:1px solid #E4393C;"{/if}><input type="radio" id="pay{$payment.pay_id}" name="payment" value="{$payment.pay_id}" {if $order.pay_id eq $payment.pay_id}checked{/if} isCod="{$payment.is_cod}" onclick="selectPayment(this)" {if $cod_disabled and $payment.is_cod eq "1"}disabled="true"{/if}/><label for="pay{$payment.pay_id}" class="icon {$payment.pay_code}" onclick="sel(li{$payment.pay_id});"></label></li>
{/if}
<!-- {/foreach} 循环支付方式 /if-->
</ul>
<ul class="xuanze">选择银行直接使用网银支付>></ul>
<ul class="list-bank">
<!-- {foreach from=$payment_list item=payment} -->
{if $payment.pay_order > 200}
<li id="li{$payment.pay_id}" {if $order.pay_id eq $payment.pay_id}style="border:1px solid #E4393C;"{/if}><input type="radio" id="pay{$payment.pay_id}" name="payment" value="{$payment.pay_id}" {if $order.pay_id eq $payment.pay_id}checked{/if} isCod="{$payment.is_cod}" onclick="selectPayment(this)" {if $cod_disabled and $payment.is_cod eq "1"}disabled="true"{/if}/><label for="pay{$payment.pay_id}" class="icon {$payment.pay_code}" onclick="sel(li{$payment.pay_id});"></label></li>
{/if}
<!-- {/foreach} 循环支付方式 /if-->
</ul>
</dd>
</div>
</div>

可以看到这个代码中是在label标题中添加了onclick事件,其执行的函数为function sel,

<link href="wangyin.css" rel="stylesheet" type="text/css" />
<div class="flowBox">
<h6><span>{$lang.payment_method}</span></h6>
<script type="text/javascript">
function sel(obj)
{
var li=document.getElementsByTagName("li");
for(var i=0;250;i++)
{
if(li[i]!=obj)
{
li[i].style="";
}
else
li[i].style="border:1px solid #E4393C;"
}
}
</script>

这段代码架设一个最大值250,然后遍历查询li的属性,如果li的id和当前的id相同就输出style:border:1px solid #E4393C;,如果不是就输出空值。这段代码并没有执行相应的效果,我没有深入的研究找原因。但是我从另外一个关于遍历的例子里面吸取到一点点灵感,进行了修改和调试,做成了函数的形式,这样方便在ecsho中多次调用,在这里拿出来和大家一起分享。

<script type="text/javascript">
function sel(){
var demo=document.getElementById("pay");
var children=demo.getElementsByTagName("li");
var num=0;
for(var i=0;i<children.length;i++){
children[i].index=i;
children[i].onclick=function(){
children[num].className="";
this.className="selfocus";
num=this.index;
}
}
}
</script>

pay是父级元素的id,li是目标,意思就是在id为pay的div等框架内搜索所有的li元素,这样赋值给数组children。当激活sel函数的时候,遍历一次所有的li,当轮到当前的li时候,进入onclick的处理函数,把当前class设置为selfocus,而其他所有的li设置为空,就达到了唯一选择的目的。class selfocus就可以任意修改div或者li的属性了,把boder变亮一点,这样提醒顾客当前选择的是什么。喜欢的就拿去用吧。

转载请注明:百蔬君 » 【原创文章】美化ecshop物流与支付方式之js遍历元素更改css属性

喜欢 (3)or分享 (0)
发表我的评论
取消评论

请证明您不是机器人(^v^):

表情