javascript - SUI框架使jquery的click事件对应不上
阿神
阿神 2017-04-11 12:46:58
0
2
567

我写的效果是点击“选择所有资源”,这个按钮添加selected类,下面的子项目也添加这个类,再点击取消


上图是在IE中显示,逻辑正常

但是在别的先进的浏览器中,第一次点击“选择所有资源”,这个按钮添加了selected类,但是下面的子项目没有添加,第二次点击他取消了这个类,下面的子项目反而添加了,为什么会这样,由于使用sui框架。


 <label class="checkbox-pretty inline select_all" style="line-height:18px;">
            <input type="checkbox">
            <span>选择所有资源</span>
        </label>
<tr>
            <td width="5%" class="center">
                **<label class="checkbox-pretty inline">
                    <input type="checkbox">
                    <span></span>
                </label>**
               </td>
            <td width="14%" class="center">ABCDEFG123456</td>
            <td width="7%" class="center">热轧</td>
            <td width="5%" class="center" nowrap>宝钢</td>
            <td width="6%" class="center">SPHC</td>
            <td width="13%" class="center">1.0~2.0*1250C</td>
            <td width="8%" class="center">p12334</td>
            <td width="8%" class="center">100.000</td>
            <td width="10%" class="center">¥3.500.00</td>
            <td width="12%" class="center"><ul class="unstyled">
                <li>未上架</li>
                <li>2016-08-15</li>
                <li>17:47:45</li>
              </ul></td>
            <td class="center" nowrap>2013-04-27</td>
          </tr>
          <tr>
          ...

可以看到是使用覆盖到input上的label控制,就是给label加selected类

$('.select_all').click(function(){
        if ($(this).hasClass('checked'))
            {$('.small_table label').addClass('checked');
            }else{$('.small_table label').removeClass('checked');
            }
        
    })
阿神
阿神

闭关修行中......

全部回覆(2)
大家讲道理

$('.select_all').click(function(){

if (!$(this).hasClass('checked'))
{
    $(this).addClass('checked');
    $('.small_table label').addClass('checked');
}else{
    $(this).removeClass('checked');
    $('.small_table label').removeClass('checked');
}

})
点击判断 select_all 没有 checked 所以加上checked ,下面子元素 加checked,二回点击 有 checked 进入else

Ty80

求大神指导~~

熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!