<span class="p_color">颜色：
<a id="1" href="javascript:void(0);">红色</a>
<a id="2" href="javascript:void(0);">白色</a>
<a id="4" href="javascript:void(0);">黑色</a>
<a id="5" href="javascript:void(0);">灰色</a>
<a id="6" href="javascript:void(0);">黄色</a>
<a id="7" href="javascript:void(0);">绿色</a>
</span>
<style type="text/css">
.p_color a, .p_size a
{
margin: 0 5px;
padding: 2px 5px;
border: 1px solid #ccc;
cursor: pointer;
}
.p_color a.on, .p_size a.on
{
border-color: #f00;
}
.p_color a:hover, p_size a:hover
{
border-color: #f00;
}
</style>
<script type="text/javascript">
$(document).ready(function(){
$(".p_color a").click(function(){
$(".p_color a").removeClass("on");
$(this).addClass("on");
});
</script>
上面实现的是电子商城站前台购买衣服的颜色功能(单选)。
我现在想问的是我如何判断他是否有选择颜色。如果有选择则返回 颜色ID。如果没有返回空。
请问下代码要如何写呢。
我自己写了个
<srcipt>
$(".p_color a").each(function(index){
if($(this).attr("class")=="on")
{
colorName=$(this).attr("id");
}else
{
alert("请选着颜色！");
return;
}
});
</srcipt>
这样就是选择了颜色也会出现请选择颜色。
------解决方案--------------------------------------------------------
做一个隐藏的标签当他选择颜色后把ID值赋给隐藏控件就可以了
------解决方案--------------------------------------------------------
- JScript code
var selected = $(".p_color a[class='on']")[0]; var colorName = null; if (selected) colorName = $(selected).attr("id"); else alert("请选择颜色！");
------解决方案--------------------------------------------------------
- JScript code
//看LZ这个要求，这些链接是单选吧，只可能一个选中，那么就不需要用eachif ($("a.on").size() == 1) { var selectId = $("a.on").attr("id"); //这是选择的A标签的ID }else { alert("请选着颜色！"); return;}
------解决方案--------------------------------------------------------
<input type="hidden" id="hiddenid" >
------解决方案--------------------------------------------------------
……直接用单选那个小圆圈不可以吗？
为什么非要用a呢……
------解决方案--------------------------------------------------------
可以为选中的a标签添加attribute标记或者用变量记录当前选中的a标牌id