Question

<script type="text/javascript">
        $(document).ready(function () {
            $('#mytable td').click(function () {
                $(this).toggleClass('newclass');

            });
        });
    </script>

此函数更改表格中所选列的类。它工作正常。

但是它不应该允许一次选择多于2列（通过选择我的意思是具有新类切换的列 - newclass）。因此，如果点击其他列，它就不应该做出反应。

我该怎么做？我可以计算当前使用newclass的列数，如果它是2则取消该函数。我不确定如何计算它们或者这是否是最好的方法。

Answer 1

这是确保不超过2

的一种方法

jsfiddle

$('#mytable td').click(function() {
    var $this = $(this);
    // toggle 'on' if
    // 1. it doesn't already have the class and
    // 2. and there are less than two set to .newclass
    // toggle 'off' if
    // 1. it already has the class and
    // 2. and there are less than two set to .newclass
    $this.toggleClass('newclass', 
        !$this.hasClass('newclass') && 
        $('#mytable .newclass').length < 2);
})

Answer 2

size()方法显示有多少其他元素与该选择器匹配，因此您可以在应用toggleClass（）之前对其进行测试：

<script type="text/javascript">
    $(document).ready(function () {
        $('#mytable td').click(function () {
           if ($("#mytable td.newclass").size() < 2) 
           { 
               $(this).toggleClass('newclass');
           }

        });
    });
</script>

Answer 3

尝试使用length属性，如下所示：

<script type="text/javascript">
    $(document).ready(function () {
        $('#mytable td').click(function () {
            if ($('#mytable td.newclass').length < 2)){                
                $(this).toggleClass('newclass');
            }
        });
    });
</script>

希望这有帮助！

Answer 4

<script type="text/javascript">
    $(document).ready(function () {
        $('#mytable td').click(function () {
            if(!$(this).hasClass('newClass')){
                if($("td.newClass").size() < 2){
                    $(this).toggleClass('newclass');
                }
            }
            else {
                 $(this).toggleClass('newclass');
            }
        });
    });
</script>

jquery - 将toggleClass限制为2个元素

4 个答案: