javascript - SUI框架使jquery的click事件对应不上

问题描述

问 题

我写的效果是点击选择所有资源，这个按钮添加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');
            }
        
    })

解决方案

$('.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

这篇关于javascript - SUI框架使jquery的click事件对应不上的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！