自己写了个页面想要模拟多选框 大部分实现了 差了一点样式上的小效果
由于label想要把宽度撑起来的前提是外面的li标签的宽度必须大于等于label的宽度,我就想获取到label的宽度按照id赋予给对于的li标签上 失败了 考虑不出症结在哪 求解
html处的代码
<li class="Check-box clearfix">
<ul>
<li class="checkbox-li title"><span>专 业:</span></li>
<li class="checkbox-li bb">可多选</li>
<li class="checkbox-li checkboxOne" id="input-01">
<input type="checkbox" value="1" id="checkboxOneInput-01" name="" />
<label for="checkboxOneInput-01" class="check-label" id="t-01">创新实验班</label>
</li>
<li class="checkbox-li checkboxOne" id="input-02" >
<input type="checkbox" value="2" id="checkboxOneInput-02" name="" />
<label for="checkboxOneInput-02" class="check-label" id="t-02">创新班</label>
</li>
</ul>
</li>
下面是jq代码
$(document).ready(function(){
$('.check-label').each(function(){
var clid = $(this).attr('id');
var wclid = $("#"+clid).innerWidth();
var ww = $("#inpu" + clid );
ww.width(wclid);
});
});
按你的思路,你的脚本是没错的,不过有几个地方需要优化一下
$(document).ready(function() {
$('.check-label').each(function() {
var label = $(this);
var clid = $(this).attr('id');
// 当前 label 已经取到了,不用再用 $() 根据 ID 的封装的效率略低
var wclid = label.innerWidth();
// 这里 t-xx 和 input-xx 的关系很明确,就是直接的包含关系
// 所以可以用 parnet() 来获取外层节点,不需要用 $() 来获取
// var ww = $("#inpu" + clid);
var ww = label.parent();
ww.width(wclid);
});
});
倒是改改样式表可能会达到你的效果
li {
display: inline-block;
}
版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。