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

            });
        });
    </script>

Ta funkcja zmienia klasę wybranej kolumny w moim stole. To działa dobrze.

Jednak nie należy zezwolić na wybranie więcej niż 2 kolumn na raz (według wybranego I oznaczają kolumnę o nowej klasie przełączonej - NewClass). Więc po prostu nie powinien reagować, jeśli kliknięto inne kolumny.

Jak mógłbym to zrobić? Mogę policzyć, ile kolumn obecnie używa NewClass i jeśli jest 2, a następnie anuluj funkcję. Nie jestem pewien, jak je policzyć lub jest to najlepszy sposób, aby to zrobić.

0
domino 28 październik 2011, 23:15

4 odpowiedzi

Najlepsza odpowiedź

Oto jeden sposób, aby zapewnić nie więcej niż 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);
})
2
MikeM 28 październik 2011, 19:35

Spróbuj użyć Długość Właściwość:

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

Mam nadzieję że to pomoże!

1
dSquared 28 październik 2011, 19:17
<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>
1
Keith.Abramo 28 październik 2011, 19:23

Metoda rozmiaru () pokazuje, ile innych elementów pasuje do tego selektora, dzięki czemu możesz przetestować przed tym wcześniej Stosowanie ToggleClass ():

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

        });
    });
</script>
1
Michael Low 28 październik 2011, 19:16