JQuery отключить или оповещения на основе всячески манипулировать данными формы

Question

Это о системе бронирования

Пусть каждая комната имеет емкость 10.

Количество людей уже в комнате будет отображаться в таблице данных <td> «класса '

<td class='5'>1</td> 
<td class='7'>2</td> 
<td class='9'>3</td> 
<td class='3'>4</td> 
<td class='2'>5</td> 
<td class='7'>6</td> 

Число в классе «класс» представляет количество людей в этой комнате. 1,2,3 до 6 являются номерами комнат

У меня есть поле ввода текста с <input name='people' type="text">, чтобы получить значение количества людей, за которые я резервирую.

Требование теперь, если я ввел «4» в ввод людей, я не могу щелкнуть и зарезервировать номер № 2, так как у него уже 7 человек, а емкость - 10. Я должен быть в состоянии щелкнуть по другому номер, который имеет 6 человек или меньше, упомянутых в <td class=>

Answer 1

Вам понадобится знать what room they are trying to reserve, how many people they are trying to reserve, how many people are already reserved и what the max capacity, когда пользователь нажимает «зарезервировать».

Если бы я был вами, я бы не использовал класс для хранения данных. Я бы использовал атрибут data.Я хотел бы сделать следующее:

<td id="15" data-currentFilled="7" data-maxcapacity="10">table 15</td> 

1. магазин идентификатор таблицы, используя Id Аттрибут

2. магазина текущих # людей, зарезервированных для этой таблицы в currentFilled ATTR

3. Хранить максимальную емкость в maxcapacity attr

Тогда ваш Javascript должен был бы быть что-то вроде этого:

$(".reservationSave").click(function() { 

    // Get the table trying to be reserved and how many they're trying to reserve 
    var tableBeingReserved = $(this).attr("id"); 
    var howMany = parseInt($(".reservingGuestsNumber").val()); 

    // Find out how many people are currently reserved and max capacity 
    var currentFilled = parseInt($("td#15").attr("data-currentFilled")); 
    var maxCapacity = parseInt($("td#15").attr("data-maxcapacity")); 

    if (currentFilled + howMany > maxCapacity) { 
    alert("Cannot save. Too many people"); 
    } 

}); 

Теперь, конечно, вам придется изменить некоторые имена, и т.д., но вот jsbin, чтобы помочь вам:

http://jsbin.com/hopuqujoli/edit?html,js,output

Answer 2

Лучше использовать атрибуты данных для хранения и извлечения таких данных элемента. он может быть установлен как:

<td data-number="5">1</td> 

и может быть retrived с помощью:

$('your-td-element').data('number') 

, а затем вы можете проверить, если входной сигнал меньше или равно пустые слоты или пространства в комнате.

Answer 3

Во-первых, как правило, это лучше не хранить данные о каком-то элементе в атрибуте класса (так как это преимущественно используется для укладки), что, как правило, что-то вы могли бы сделать в обычном атрибуте или атрибута данных, например:

<td class="myClass" data-count="7">15<td> 

что вы можете сделать, если вы даете все комнаты имя так:

<td name="Room15" data-count="7">15<td> 
<td name="Room16" data-count="8">16<td> 
<td name="Room17" data-count="3">17<td> 

вы можете использовать селектор JQuery из: $('td[name^="Room"]') и что даст вам все Td элементы, чье имя начинается с «номер ». Оттуда пройдите через них и делайте с ними все, что хотите. Вы можете отключить элемент, если он не прошел проверку, или добавить возможных кандидатов в какой-либо список, а затем вывести список. Как вы циклически в функции .each, вы можете захватить значение атрибута данных подсчета текущего элемента с использованием либо:

this.attr("data-count") 

или поскольку это конкретно атрибут данных

this.data("count")