Выбор лимитных ячеек в нескольких таблицах

Question

Есть ли способ ограничить количество ячеек, которые выбраны для каждой таблицы, до 2?

Я попытался использовать самый близкий метод, но я, похоже, не работает (я не должен его правильно использовать).

Моя попытка в jquery находится ниже и здесь Fiddle.

$(function() { 
 
    $('.css-table-td').click(function() { 
 
    var theTable = $(this).closest('css-table'); 
 
    var sCount = $('.highligh-cell').length; 
 
    //code below not working 
 
    //if (sCount < 3 || $(e.target).hasClass('highlighted')) 
 
    $(this).toggleClass("highligh-cell"); 
 
    }); 
 
});

.css-table { 
 
    display: table; 
 
    background-color: #ccc; 
 
    width: 60px; 
 
} 
 
.css-table-tr { 
 
    display: table-row; 
 
} 
 
.css-table-td { 
 
    display: table-cell; 
 
    border: 1px solid #fff; 
 
    width: 30px; 
 
    height: 30px; 
 
    text-align: center; 
 
    vertical-align: middle; 
 
} 
 
.highligh-cell { 
 
    background: #999; 
 
}

<div class="css-table"> 
 
    <div class="css-table-tr"> 
 
    <div class="css-table-td" id="1">b</div> 
 
    <div class="css-table-td" id="2">c</div> 
 
    </div> 
 
    <div class="css-table-tr"> 
 
    <div class="css-table-td" id="3">e</div> 
 
    <div class="css-table-td" id="4">f</div> 
 
    </div> 
 
</div> 
 
<br/> 
 
<div class="css-table"> 
 
    <div class="css-table-tr"> 
 
    <div class="css-table-td" id="5">b</div> 
 
    <div class="css-table-td" id="6">c</div> 
 
    </div> 
 
    <div class="css-table-tr"> 
 
    <div class="css-table-td" id="7">e</div> 
 
    <div class="css-table-td" id="8">f</div> 
 
    </div> 
 
</div> 
 
<INPUT TYPE="submit" id="csstableinfo" VALUE="css info">

Answer 1

Некоторые изменения:

1. Используйте .length свойство относительно корневого родителя css-table - .closest(..).find('..')

2. $(this).closest('css-table'); должен быть $(this).closest('.css-table');. Селектор класса имеет .: .className'.

---

$('.css-table-td').click(function() { 
    var theTable = $(this).closest('.css-table'); 
    var sCount = theTable.find('.css-table-td.highligh-cell').length; 
    if (sCount < 2 || $(this).hasClass("highligh-cell")) { 
     $(this).toggleClass("highligh-cell"); 
    } 
}); 

Updated Fiddle

Answer 2

Вам необходимо правильно определить переменные события в функции OnClick $('.css-table-td').click(function(e) { и вам нужно искать только в пределах текущей таблицы (если вы хотите, чтобы два кликов в каждой таблице) var sCount = $('.highligh-cell',theTable).length;

$(function() { 
 
    $('.css-table-td').click(function(e) { 
 
    var theTable = $(this.parentNode.parentNode); 
 
    var sCount = $('.highligh-cell',theTable).length; 
 
    if (sCount < 2 || $(e.target).hasClass('highligh-cell')) 
 
     $(this).toggleClass("highligh-cell"); 
 
    }); 
 
});

.css-table { 
 
    display: table; 
 
    background-color: #ccc; 
 
    width: 60px; 
 
} 
 
.css-table-tr { 
 
    display: table-row; 
 
} 
 
.css-table-td { 
 
    display: table-cell; 
 
    border: 1px solid #fff; 
 
    width: 30px; 
 
    height: 30px; 
 
    text-align: center; 
 
    vertical-align: middle; 
 
} 
 
.highligh-cell { 
 
    background: #999; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="css-table"> 
 
    <div class="css-table-tr"> 
 
    <div class="css-table-td" id="1">b</div> 
 
    <div class="css-table-td" id="2">c</div> 
 
    </div> 
 
    <div class="css-table-tr"> 
 
    <div class="css-table-td" id="3">e</div> 
 
    <div class="css-table-td" id="4">f</div> 
 
    </div> 
 
</div> 
 
<br/> 
 
<div class="css-table"> 
 
    <div class="css-table-tr"> 
 
    <div class="css-table-td" id="5">b</div> 
 
    <div class="css-table-td" id="6">c</div> 
 
    </div> 
 
    <div class="css-table-tr"> 
 
    <div class="css-table-td" id="7">e</div> 
 
    <div class="css-table-td" id="8">f</div> 
 
    </div> 
 
</div> 
 
<INPUT TYPE="submit" id="csstableinfo" VALUE="css info">