在做一个购物车功能中货物圆形多选按钮选中时获取它的价格遇到的问题:
首先是这个圆形按钮问题:
在input上面设置width、height、border-radius等属性,
input{
height:30px;
width:30px;
border-radius:50%;
}
就是不生效;
捯饬半天,终于出来一个方法;
html:
<div>
<input type="checkbox" id="mm">
<label for="mm">12123</label>
</div>
css:
<style>
input{
display: none;
}
label{
display: block;
width: 50px;
height: 50px;
background: #f00;
border-radius: 50%;
}
input:checked + label{
background: #26ca28;
}
</style>
然后就是多选按钮选中时获取它的价格的问题:
比如要在多选按钮选中后执行函数A(找到已被选择input的某个兄弟元素);同时,多选按钮在点击后有一个click事
件触发函数B(label变色);
最初的写法:
$('label').click(function(){
//函数B<span style="color: rgb(52, 52, 52); font-family: "Source Code Pro", monospace;font-size:18px; white-space: pre-wrap;">(label变色)</span>;
//函数A<span style="color: rgb(52, 52, 52); font-family: "Source Code Pro", monospace;font-size:18px; white-space: pre-wrap;">(找到已被选择input的某个兄弟元素)</span>;
})
结果:
函数B
(label变色)执行;
而函数A(找到已被选择input的兄弟元素)
执行之后得到的是一个空数组;这就有些苦恼了(js中input没有checked这个事件 )。
查了一些资料,好像是说点击之后click事件会在input改变自身属性之前执行,执行顺序click>checked;
也就是执行函数A 的时候,input多选框的checked属性还没有增加上, 当然得到的是空数组了。
还有:
在
jquery 1.5 之前,click()会先改变checkbox状态,再触发 click事件,这就是我
想要的结果。
在 1.5之后 click事件先于属性改变触发,因为其在执行 click() 方法的时候实际上是走了 trigger ,jquery先走了内部事件系统找到了回调函数执行,再执行的浏览器原生的 click()方法来触发checkbox属性变化。(原来如此)
天真的我一度想找到一个方法让checked属性先改变,然后让click事件在执行,然而并没有什么结果 。
最后看到了监听change事件:
$('input').change(function(){
//函数A<span style="color: rgb(52, 52, 52); font-family: "Source Code Pro", monospace;font-size:18px; white-space: pre-wrap; line-height: 29.7px;">(找到已被选择input的某个兄弟元素)</span>
})
这样当我点击label的时候,label会变色,同时input的checked属性改变,执行函数A
(找到已被选择input的某个兄
弟元素)。请各位大神多多指教!